@salesforce/ui-bundle-template-base-react-app 2.2.1 → 3.1.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.1.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v3.0.0...v3.1.0) (2026-05-12)
+
+### Features
+
+- post tdx changes @W-22390798 ([#500](https://github.com/salesforce-experience-platform-emu/webapps/issues/500)) ([b611d9e](https://github.com/salesforce-experience-platform-emu/webapps/commit/b611d9ecbadd07d052bd7d9a4f5659dec422bf22))
+
+## [3.0.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v2.2.1...v3.0.0) (2026-05-11)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-react-app
+
 ## [2.2.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v2.2.0...v2.2.1) (2026-05-11)
 
 **Note:** Version bump only for package @salesforce/ui-bundle-template-base-react-app

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/ui-bundle-template-base-react-app",
-  "version": "2.2.1",
+  "version": "3.1.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "publishConfig": {
     "access": "public"

package/src/force-app/main/default/uiBundles/base-react-app/package.json

@@ -18,8 +18,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/platform-sdk-data": "^2.2.1",
-    "@salesforce/ui-bundle": "^2.2.1",
+    "@salesforce/platform-sdk-data": "^3.1.0",
+    "@salesforce/ui-bundle": "^3.1.0",
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -44,7 +44,7 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/vite-plugin-ui-bundle": "^2.2.1",
+    "@salesforce/vite-plugin-ui-bundle": "^3.1.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/src/force-app/main/default/uiBundles/base-react-app/src/components/alerts/status-alert.tsx

@@ -1,5 +1,5 @@
 import { cva, type VariantProps } from 'class-variance-authority';
-import { AlertCircleIcon, CheckCircle2Icon } from 'lucide-react';
+import { AlertCircleIcon, CheckCircle2Icon, InfoIcon } from 'lucide-react';
 import { Alert, AlertDescription } from '../../components/ui/alert';
 import { useId } from 'react';
 
@@ -8,6 +8,7 @@ const statusAlertVariants = cva('', {
     variant: {
       error: '',
       success: '',
+      info: 'text-blue-600 *:[svg]:text-current *:data-[slot=alert-description]:text-blue-600/90',
     },
   },
   defaultVariants: {
@@ -18,11 +19,11 @@ const statusAlertVariants = cva('', {
 interface StatusAlertProps extends VariantProps<typeof statusAlertVariants> {
   children?: React.ReactNode;
   /** Alert variant type. @default "error" */
-  variant?: 'error' | 'success';
+  variant?: 'error' | 'success' | 'info';
 }
 
 /**
- * Status alert component for displaying error or success messages.
+ * Status alert component for displaying error, success, or info messages.
  * Returns null if no children are provided.
  */
 export function StatusAlert({ children, variant = 'error' }: StatusAlertProps) {
@@ -31,6 +32,12 @@ export function StatusAlert({ children, variant = 'error' }: StatusAlertProps) {
 
   const isError = variant === 'error';
 
+  const icon = {
+    error: <AlertCircleIcon aria-hidden="true" />,
+    success: <CheckCircle2Icon aria-hidden="true" />,
+    info: <InfoIcon aria-hidden="true" />,
+  }[variant];
+
   return (
     <Alert
       variant={isError ? 'destructive' : 'default'}
@@ -38,11 +45,7 @@ export function StatusAlert({ children, variant = 'error' }: StatusAlertProps) {
       aria-describedby={descriptionId}
       role={isError ? 'alert' : 'status'}
     >
-      {isError ? (
-        <AlertCircleIcon aria-hidden="true" />
-      ) : (
-        <CheckCircle2Icon aria-hidden="true" />
-      )}
+      {icon}
       <AlertDescription id={descriptionId}>{children}</AlertDescription>
     </Alert>
   );

package/src/force-app/main/default/uiBundles/base-react-app/src/components/ui/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
       type={type}
       data-slot="input"
       className={cn(
-        'dark:bg-input/30 border-input 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 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+        'dark:bg-input/30 border-input 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 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground/70 placeholder:italic w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}

package/src/force-app/main/default/uiBundles/base-react-app/src/hooks/useAsyncData.ts

@@ -0,0 +1,67 @@
+import { useEffect, useRef, useState } from 'react';
+
+interface UseAsyncDataResult<T> {
+  data: T | null;
+  loading: boolean;
+  error: string | null;
+}
+
+/**
+ * Runs an async fetcher on mount and whenever `deps` change.
+ * Returns the loading/error/data state. Does not cache — every call
+ * to the fetcher hits the source directly.
+ *
+ * A cleanup flag prevents state updates if the component unmounts
+ * or deps change before the fetch completes (avoids React warnings
+ * and stale updates from out-of-order responses).
+ */
+export function useAsyncData<T>(
+  fetcher: () => Promise<T>,
+  deps: React.DependencyList
+): UseAsyncDataResult<T> {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [generation, setGeneration] = useState(0);
+
+  const fetcherRef = useRef(fetcher);
+  useEffect(() => {
+    fetcherRef.current = fetcher;
+  });
+
+  // Detect dep changes during render to reset loading state and bump generation
+  const [prevDeps, setPrevDeps] = useState(deps);
+  if (
+    deps.length !== prevDeps.length ||
+    deps.some((d, i) => d !== prevDeps[i])
+  ) {
+    setPrevDeps(deps);
+    setGeneration(g => g + 1);
+    if (!loading) setLoading(true);
+    if (error !== null) setError(null);
+  }
+
+  useEffect(() => {
+    let cancelled = false;
+
+    fetcherRef
+      .current()
+      .then(result => {
+        if (!cancelled) setData(result);
+      })
+      .catch(err => {
+        console.error(err);
+        if (!cancelled)
+          setError(err instanceof Error ? err.message : 'An error occurred');
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [generation]);
+
+  return { data, loading, error };
+}