@salesforce/webapp-template-app-react-template-b2x-experimental 1.71.0 → 1.71.2

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/features/global-search/filters/FilterSelect.tsx

@@ -0,0 +1,72 @@
+/**
+ * FilterSelect Component
+ *
+ * Renders a dropdown select field for filter values with picklist options.
+ * Used for filters with affordance === 'select'.
+ *
+ * @param filter - Filter definition containing field path, label, and attributes
+ * @param value - Currently selected filter value
+ * @param options - Array of picklist values to display as options
+ * @param onChange - Callback when selection changes
+ *
+ * @remarks
+ * - Filters out invalid options (null/undefined values)
+ * - Displays option label if available, otherwise uses value
+ * - Shows placeholder from filter attributes or default "Select..."
+ *
+ * @example
+ * ```tsx
+ * <FilterSelect
+ *   filter={selectFilter}
+ *   value={selectedValue}
+ *   options={picklistOptions}
+ *   onChange={(value) => setSelectedValue(value)}
+ * />
+ * ```
+ */
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../components/ui/select";
+import { Field, FieldLabel, FieldDescription } from "../../../components/ui/field";
+import type { Filter } from "../types/filters/filters";
+import type { PicklistValue } from "../types/filters/picklist";
+
+interface FilterSelectProps {
+	filter: Filter;
+	value: string;
+	options: PicklistValue[];
+	onChange: (value: string) => void;
+}
+
+export default function FilterSelect({ filter, value, options, onChange }: FilterSelectProps) {
+	return (
+		<Field>
+			<FieldLabel htmlFor={filter.targetFieldPath}>
+				{filter.label || filter.targetFieldPath}
+			</FieldLabel>
+			<Select value={value} onValueChange={onChange}>
+				<SelectTrigger
+					id={filter.targetFieldPath}
+					aria-label={filter.label || filter.targetFieldPath}
+				>
+					<SelectValue placeholder={filter.attributes?.placeholder || "Select..."} />
+				</SelectTrigger>
+				<SelectContent>
+					{options.map((option) => {
+						if (!option || !option.value) return null;
+						return (
+							<SelectItem key={option.value} value={option.value}>
+								{option.label || option.value}
+							</SelectItem>
+						);
+					})}
+				</SelectContent>
+			</Select>
+			{filter.helpMessage && <FieldDescription>{filter.helpMessage}</FieldDescription>}
+		</Field>
+	);
+}

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/{hooks → features/global-search/hooks}/form.tsx

@@ -1,15 +1,20 @@
 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 {
+	Field,
+	FieldDescription,
+	FieldError,
+	FieldLabel,
+} from "../../../components/ui/field";
+import { Input } from "../../../components/ui/input";
 import {
 	Select,
 	SelectContent,
 	SelectItem,
 	SelectTrigger,
 	SelectValue,
-} from "../components/ui/select";
-import { cn } from "../lib/utils";
+} from "../../../components/ui/select";
+import { cn } from "../../../lib/utils";
 import type { PicklistValue } from "../types/filters/picklist";
 import { getUniqueErrors } from "../utils/formUtils";
 

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/{pages → features/global-search/pages}/DetailPage.tsx

@@ -1,12 +1,12 @@
 import { useMemo } from "react";
 import { useParams, useNavigate } from "react-router";
-import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
-import { Skeleton } from "../components/ui/skeleton";
-import { Alert, AlertDescription, AlertTitle } from "../components/ui/alert";
+import { Card, CardContent, CardHeader, CardTitle } from "../../../components/ui/card";
+import { Skeleton } from "../../../components/ui/skeleton";
+import { Alert, AlertDescription, AlertTitle } from "../../../components/ui/alert";
 import { AlertCircle } from "lucide-react";
 import DetailHeader from "../components/detail/DetailHeader";
 import { UiApiDetailForm } from "../components/detail/UiApiDetailForm";
-import { OBJECT_API_NAMES, DEFAULT_DETAIL_PAGE_TITLE } from "../constants";
+import { OBJECT_API_NAMES, DEFAULT_DETAIL_PAGE_TITLE } from "../../../constants";
 import { toRecordDisplayNameMetadata } from "../utils/fieldUtils";
 import { useRecordDetailLayout } from "../hooks/useRecordDetailLayout";
 import { getGraphQLRecordDisplayName } from "../utils/graphQLNodeFieldUtils";

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/{pages → features/global-search/pages}/GlobalSearch.tsx

@@ -13,15 +13,15 @@
  */
 import { useMemo, useState, useCallback, useEffect, useRef } from "react";
 import { useParams } from "react-router";
-import { OBJECT_API_NAMES, DEFAULT_PAGE_SIZE } from "../constants";
+import { OBJECT_API_NAMES, DEFAULT_PAGE_SIZE } from "../../../constants";
 import { useObjectListMetadata } from "../hooks/useObjectSearchData";
 import { useObjectInfoBatch } from "../hooks/useObjectInfoBatch";
 import { useRecordListGraphQL } from "../hooks/useRecordListGraphQL";
-import FiltersPanel from "../components/FiltersPanel";
+import FiltersPanel from "../components/filters/FiltersPanel";
 import SearchHeader from "../components/search/SearchHeader";
 import SearchResultsPanel from "../components/search/SearchResultsPanel";
-import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
-import { Skeleton } from "../components/ui/skeleton";
+import { Card, CardContent, CardHeader, CardTitle } from "../../../components/ui/card";
+import { Skeleton } from "../../../components/ui/skeleton";
 import type { FilterCriteria } from "../types/filters/filters";
 import type { SearchResultRecord } from "../types/search/searchResults";
 import { graphQLNodeToSearchResultRecordData } from "../utils/graphQLRecordAdapter";

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/pages/Home.tsx

@@ -1,4 +1,4 @@
-import { GlobalSearchInput } from "../components/shared/GlobalSearchInput";
+import { GlobalSearchInput } from "../features/global-search/components/search/GlobalSearchInput";
 
 export default function Home() {
 	return (

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/routes.tsx

@@ -1,20 +1,20 @@
 import type { RouteObject } from 'react-router';
 import Home from './pages/Home';
 import NotFound from './pages/NotFound';
-import Login from "./auth/pages/Login";
-import Register from "./auth/pages/Register";
-import ForgotPassword from "./auth/pages/ForgotPassword";
-import ResetPassword from "./auth/pages/ResetPassword";
-import Profile from "./auth/pages/Profile";
-import ChangePassword from "./auth/pages/ChangePassword";
-import AuthenticationRoute from "./auth/layouts/authenticationRouteLayout";
-import PrivateRoute from "./auth/layouts/privateRouteLayout";
-import { ROUTES } from "./auth/authenticationConfig";
-import GlobalSearch from "./pages/GlobalSearch";
-import DetailPage from "./pages/DetailPage";
+import Login from "./features/authentication/pages/Login";
+import Register from "./features/authentication/pages/Register";
+import ForgotPassword from "./features/authentication/pages/ForgotPassword";
+import ResetPassword from "./features/authentication/pages/ResetPassword";
+import Profile from "./features/authentication/pages/Profile";
+import ChangePassword from "./features/authentication/pages/ChangePassword";
+import AuthenticationRoute from "./features/authentication/layouts/authenticationRouteLayout";
+import PrivateRoute from "./features/authentication/layouts/privateRouteLayout";
+import { ROUTES } from "./features/authentication/authenticationConfig";
+import GlobalSearch from "./features/global-search/pages/GlobalSearch";
+import DetailPage from "./features/global-search/pages/DetailPage";
 import { Suspense } from "react";
-import LoadingFallback from "./components/LoadingFallback";
-import AuthAppLayout from "./auth/layouts/AuthAppLayout";
+import LoadingFallback from "./features/global-search/components/shared/LoadingFallback";
+import AuthAppLayout from "./features/authentication/layouts/AuthAppLayout";
 
 export const routes: RouteObject[] = [
   {

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.71.0",
+  "version": "1.71.2",
   "description": "Base SFDX project template",
   "private": true,
   "files": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-app-react-template-b2x-experimental",
-  "version": "1.71.0",
+  "version": "1.71.2",
   "description": "Base reference app template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",

package/dist/force-app/main/default/README.md

@@ -1,72 +0,0 @@
-# App React Template B2X
-
-A B2X (Business-to-Consumer) React starter template for customer-facing apps on the Salesforce platform. Includes authentication, global search, and an Experience Cloud site container. Built with React, Vite, TypeScript, and Tailwind/shadcn.
-
-## What's included
-
-| Path                                                          | Description                                                                                                                              |
-| ------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| `force-app/main/default/webapplications/appreacttemplateb2x/` | React web app (source, config, tests)                                                                                                    |
-| `force-app/main/default/classes/`                             | Apex classes for authentication — `WebAppAuthUtils`, `WebAppChangePassword`, `WebAppForgotPassword`, `WebAppLogin`, `WebAppRegistration` |
-| `force-app/main/default/digitalExperienceConfigs/`            | Experience Cloud site configuration                                                                                                      |
-| `force-app/main/default/digitalExperiences/`                  | Experience Cloud site definition                                                                                                         |
-| `force-app/main/default/networks/`                            | Experience Cloud network                                                                                                                 |
-| `force-app/main/default/sites/`                               | Salesforce site                                                                                                                          |
-
-## Getting started
-
-Navigate to the web app and install dependencies:
-
-```bash
-cd force-app/main/default/webapplications/appreacttemplateb2x
-npm install
-npm run dev
-```
-
-Opens at http://localhost:5173 by default. For build and test instructions, see the [web app README](force-app/main/default/webapplications/appreacttemplateb2x/README.md).
-
-## Deploy
-
-### Deploy everything (metadata + Experience Cloud site + web app)
-
-```bash
-cd force-app/main/default/webapplications/appreacttemplateb2x && npm install && npm run build && cd -
-sf project deploy start --source-dir force-app --target-org <alias>
-```
-
-### Deploy the web app only
-
-```bash
-cd force-app/main/default/webapplications/appreacttemplateb2x && npm install && npm run build && cd -
-sf project deploy start --source-dir force-app/main/default/webapplications --target-org <alias>
-```
-
-### Deploy Experience Cloud site only
-
-```bash
-sf project deploy start \
-  --source-dir force-app/main/default/digitalExperienceConfigs \
-  --source-dir force-app/main/default/digitalExperiences \
-  --source-dir force-app/main/default/networks \
-  --source-dir force-app/main/default/sites \
-  --target-org <alias>
-```
-
-### Deploy authentication classes only
-
-```bash
-sf project deploy start --source-dir force-app/main/default/classes --target-org <alias>
-```
-
-Replace `<alias>` with your target org alias.
-
-## Configure Your Salesforce DX Project
-
-The `sfdx-project.json` file contains useful configuration information for your project. See [Salesforce DX Project Configuration](https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_ws_config.htm) in the _Salesforce DX Developer Guide_ for details about this file.
-
-## Read All About It
-
-- [Salesforce Extensions Documentation](https://developer.salesforce.com/tools/vscode/)
-- [Salesforce CLI Setup Guide](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm)
-- [Salesforce DX Developer Guide](https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_intro.htm)
-- [Salesforce CLI Command Reference](https://developer.salesforce.com/docs/atlas.en-us.sfdx_cli_reference.meta/sfdx_cli_reference/cli_reference.htm)

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/auth/alerts/status-alert.tsx

@@ -1,45 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import { AlertCircleIcon, CheckCircle2Icon } from "lucide-react";
-import { Alert, AlertDescription } from "../../components/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/appreacttemplateb2x/src/auth/layout/card-layout.tsx

@@ -1,29 +0,0 @@
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "../../components/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/appreacttemplateb2x/src/components/layout/card-layout.tsx

@@ -1,19 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
-
-interface CardLayoutProps {
-	title: string;
-	description?: string;
-	children: React.ReactNode;
-}
-
-export function CardLayout({ title, description, children }: CardLayoutProps) {
-	return (
-		<Card className="w-full">
-			<CardHeader>
-				<CardTitle className="text-2xl">{title}</CardTitle>
-				{description && <CardDescription>{description}</CardDescription>}
-			</CardHeader>
-			<CardContent>{children}</CardContent>
-		</Card>
-	);
-}

package/dist/force-app/main/default/webapplications/appreacttemplateb2x/src/features/global-search/index.ts

@@ -1,33 +0,0 @@
-/**
- * Global Search Feature - Public API
- *
- * Main entry point for the global search feature.
- * Exports all public APIs, components, and utilities that can be consumed by other packages.
- *
- * @remarks
- * This is the public API of the feature. Components and utilities exported here
- * can be imported by other packages that depend on this feature.
- *
- * @example
- * ```tsx
- * // In another package's appLayout.tsx
- * import { GlobalSearchInput } from 'feature-react-global-search';
- *
- * export default function AppLayout() {
- *   return (
- *     <div>
- *       <GlobalSearchInput />
- *       <Outlet />
- *     </div>
- *   );
- * }
- * ```
- */
-
-export * from "../../api";
-export * from "../../hooks";
-export * from "../../utils";
-export * from "../../constants";
-export * from "../../routes";
-export * from "../../hooks";
-export * from "../../types";