@salesforce/ui-bundle-template-app-react-sample-b2x 1.117.2

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/select.tsx

@@ -0,0 +1,193 @@
+import * as React from 'react';
+import { Select as SelectPrimitive } from 'radix-ui';
+
+import { cn } from '../../lib/utils';
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from 'lucide-react';
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn('scroll-my-1 p-1', className)}
+      {...props}
+    />
+  );
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = 'default',
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: 'sm' | 'default';
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="text-muted-foreground size-4 pointer-events-none" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = 'item-aligned',
+  align = 'center',
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        data-align-trigger={position === 'item-aligned'}
+        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 min-w-36 rounded-lg shadow-md ring-1 duration-100 relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          data-position={position}
+          className={cn(
+            'data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)',
+            position === 'popper' && ''
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn('text-muted-foreground px-1.5 py-1 text-xs', className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="pointer-events-none" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn('bg-border -mx-1 my-1 h-px pointer-events-none', className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/separator.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Separator as SeparatorPrimitive } from 'radix-ui';
+
+import { cn } from '../../lib/utils';
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/skeleton.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn('bg-accent animate-pulse rounded-md', className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/dist/force-app/main/default/uiBundles/propertyrentalapp/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/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/spinner.tsx

@@ -0,0 +1,16 @@
+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 as any)}
+    />
+  );
+}
+
+export { Spinner };

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+
+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 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 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 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 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,
+};

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/tabs.tsx

@@ -0,0 +1,88 @@
+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';
+
+function Tabs({
+  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}
+    />
+  );
+}
+
+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',
+    },
+  }
+);
+
+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}
+    />
+  );
+}
+
+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}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/api/userProfileApi.ts

@@ -0,0 +1,95 @@
+/**
+ * Extensible user profile fetching and updating via UI API GraphQL.
+ */
+import { createDataSDK } from "@salesforce/sdk-data";
+import { flattenGraphQLRecord } from "../utils/helpers";
+
+const USER_PROFILE_FIELDS_FULL = `
+    Id
+    FirstName @optional { value }
+    LastName @optional { value }
+    Email @optional { value }
+    Phone @optional { value }
+    Street @optional { value }
+    City @optional { value }
+    State @optional { value }
+    PostalCode @optional { value }
+    Country @optional { value }`;
+
+const USER_CONTACT_FIELDS = `
+    Id
+    ContactId @optional { value }`;
+
+function getUserProfileQuery(fields: string): string {
+	return `
+    query GetUserProfile($userId: ID) {
+        uiapi {
+            query {
+                User(where: { Id: { eq: $userId } }) {
+                    edges {
+                        node {${fields}}
+                    }
+                }
+            }
+        }
+    }`;
+}
+
+function getUserProfileMutation(fields: string): string {
+	return `
+    mutation UpdateUserProfile($input: UserUpdateInput!) {
+      uiapi {
+        UserUpdate(input: $input) {
+          Record {${fields}}
+        }
+      }
+    }`;
+}
+
+function throwOnGraphQLErrors(response: any): void {
+	if (response?.errors?.length) {
+		throw new Error(response.errors.map((e: any) => e.message).join("; "));
+	}
+}
+
+/**
+ * Fetches the user profile via GraphQL and returns a flattened record.
+ * @param userId - The Salesforce User Id.
+ * @param fields - GraphQL field selection (defaults to USER_PROFILE_FIELDS_FULL).
+ */
+export async function fetchUserProfile<T>(
+	userId: string,
+	fields: string = USER_PROFILE_FIELDS_FULL,
+): Promise<T> {
+	const data = await createDataSDK();
+	const response: any = await data.graphql?.(getUserProfileQuery(fields), {
+		userId,
+	});
+	throwOnGraphQLErrors(response);
+	return flattenGraphQLRecord<T>(response?.data?.uiapi?.query?.User?.edges?.[0]?.node);
+}
+
+/**
+ * Fetches the user's associated contact record ID via GraphQL and returns a flattened record.
+ * @param userId - The Salesforce User Id.
+ */
+export async function fetchUserContact<T>(userId: string): Promise<T> {
+	return fetchUserProfile<T>(userId, USER_CONTACT_FIELDS);
+}
+
+/**
+ * Updates the user profile via GraphQL and returns the flattened updated record.
+ * @param userId - The Salesforce User Id.
+ * @param values - The field values to update.
+ */
+export async function updateUserProfile<T>(
+	userId: string,
+	values: Record<string, unknown>,
+): Promise<T> {
+	const data = await createDataSDK();
+	const response: any = await data.graphql?.(getUserProfileMutation(USER_PROFILE_FIELDS_FULL), {
+		input: { Id: userId, User: { ...values } },
+	});
+	throwOnGraphQLErrors(response);
+	return flattenGraphQLRecord<T>(response?.data?.uiapi?.UserUpdate?.Record);
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/authHelpers.ts

@@ -0,0 +1,73 @@
+import { AUTH_REDIRECT_PARAM } from "./authenticationConfig";
+import { z } from "zod";
+
+/** Email field validation */
+export const emailSchema = z.string().trim().email("Please enter a valid email address");
+
+/** Password field validation (minimum 8 characters) */
+export const passwordSchema = z.string().min(8, "Password must be at least 8 characters");
+
+/**
+ * Shared schema for new password + confirmation fields.
+ * Validates password length and matching confirmation.
+ */
+export const newPasswordSchema = z
+	.object({
+		newPassword: passwordSchema,
+		confirmPassword: z.string().min(1, "Please confirm your password"),
+	})
+	.refine((data) => data.newPassword === data.confirmPassword, {
+		message: "Passwords do not match",
+		path: ["confirmPassword"],
+	});
+
+/**
+ *
+ * Extracts the startUrl from URLSearchParams, defaulting to '/'.
+ *
+ * SECURITY NOTE: This function strictly validates the URL to prevent
+ * Open Redirect vulnerabilities. It allows only relative paths.
+ *
+ * @param searchParams - The URLSearchParams object from useSearchParams()
+ * @returns The start URL for post-authentication redirect
+ */
+export function getStartUrl(searchParams: URLSearchParams): string {
+	// 1. Check for the standard redirect parameter
+	const url = searchParams.get(AUTH_REDIRECT_PARAM);
+	// 2. Security Check: Validation Logic
+	if (url && isValidRedirect(url)) {
+		return url;
+	}
+	// 3. Fallback: Default to root
+	return "/";
+}
+
+/**
+ * [Dev Note] Security: Validates that the redirect URL is a relative path
+ * to prevent Open Redirect vulnerabilities.
+ *
+ * Security Checks:
+ * 1. Rejects protocol-relative URLs (//)
+ * 2. Rejects backslash usage which some browsers treat as slashes (/\)
+ * 3. Rejects control characters
+ */
+function isValidRedirect(url: string): boolean {
+	// Basic structure check
+	if (!url.startsWith("/") || url.startsWith("//")) return false;
+	// Security: Reject backslashes to prevent /\example.com bypasses
+	if (url.includes("\\")) return false;
+	// Robustness: Ensure it doesn't contain whitespace/control characters
+	if (/[^\u0021-\u00ff]/.test(url)) return false;
+	return true;
+}
+
+/**
+ * Shared response type for authentication endpoints (login/register).
+ * Success responses contain `success: true` and `redirectUrl`.
+ * Error responses contain `errors` array.
+ */
+export interface AuthResponse {
+	success?: boolean;
+	redirectUrl?: string | null;
+	errors?: string[];
+}