@salesforce/webapp-template-base-react-app-experimental 1.43.0 → 1.44.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.
 
+# [1.44.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.43.1...v1.44.0) (2026-02-20)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-react-app-experimental
+
+## [1.43.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.43.0...v1.43.1) (2026-02-20)
+
+### Bug Fixes
+
+- fixing b2e template ([#137](https://github.com/salesforce-experience-platform-emu/webapps/issues/137)) ([73992a4](https://github.com/salesforce-experience-platform-emu/webapps/commit/73992a4b39a82f607b062a60dae16be494c80ba5))
+
 # [1.43.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.42.0...v1.43.0) (2026-02-20)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-react-app-experimental

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-base-react-app-experimental",
-  "version": "1.43.0",
+  "version": "1.44.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "publishConfig": {
     "access": "public"
@@ -15,5 +15,5 @@
     "test:coverage": "npm run test",
     "test:e2e": "cd src/force-app/main/default/webapplications/base-react-app && rm -rf node_modules && npm ci && npx playwright install chromium && npm run build:e2e && npx playwright test"
   },
-  "gitHead": "6987ff60e5d99e64b34cbe2383e54cda1727e151"
+  "gitHead": "00f5b3b58d400b13a1b1130d11f571c2e1366cb4"
 }

package/src/force-app/main/default/webapplications/base-react-app/e2e/app.spec.ts

@@ -9,13 +9,6 @@ test.describe('base-react-app', () => {
     ).toBeVisible();
   });
 
-  test('about page loads', async ({ page }) => {
-    await page.goto('/about');
-    await expect(page).toHaveURL(/\/about/);
-    await expect(page.getByRole('heading', { name: 'About' })).toBeVisible();
-    await expect(page.getByText('This is the about page.')).toBeVisible();
-  });
-
   test('not found route shows 404', async ({ page }) => {
     await page.goto('/non-existent-route');
     await expect(page.getByRole('heading', { name: '404' })).toBeVisible();

package/src/force-app/main/default/webapplications/base-react-app/src/appLayout.tsx

@@ -1,29 +1,11 @@
-import { Outlet, NavLink } from 'react-router';
-
-const navLinkClass = ({ isActive }: { isActive: boolean }) =>
-  `text-sm font-medium ${isActive ? 'text-gray-900' : 'text-gray-600 hover:text-gray-900'}`;
+import { Outlet } from 'react-router';
+import NavigationMenu from './navigationMenu';
 
 export default function AppLayout() {
   return (
     <>
-      <nav className="sticky top-0 z-10 border-b border-gray-200 bg-white">
-        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <div className="flex h-14 items-center gap-8">
-            <NavLink to="/" end className={navLinkClass}>
-              Home
-            </NavLink>
-            <NavLink to="/about" className={navLinkClass}>
-              About
-            </NavLink>
-            <NavLink to="/does-not-exist" className={navLinkClass}>
-              404
-            </NavLink>
-          </div>
-        </div>
-      </nav>
-      <main>
-        <Outlet />
-      </main>
+      <NavigationMenu />
+      <Outlet />
     </>
   );
 }

package/src/force-app/main/default/webapplications/base-react-app/src/navigationMenu.tsx

@@ -0,0 +1,80 @@
+import { Link, useLocation } from 'react-router';
+import { getAllRoutes } from './router-utils';
+import { useState } from 'react';
+
+export default function NavigationMenu() {
+  const [isOpen, setIsOpen] = useState(false);
+  const location = useLocation();
+
+  const isActive = (path: string) => location.pathname === path;
+
+  const toggleMenu = () => setIsOpen(!isOpen);
+
+  const navigationRoutes: { path: string; label: string }[] = getAllRoutes()
+    .filter(
+      route =>
+        route.handle?.showInNavigation === true &&
+        route.fullPath !== undefined &&
+        route.handle?.label !== undefined
+    )
+    .map(
+      route =>
+        ({
+          path: route.fullPath,
+          label: route.handle?.label,
+        }) as { path: string; label: string }
+    );
+
+  return (
+    <nav className="bg-white border-b border-gray-200">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          <Link to="/" className="text-xl font-semibold text-gray-900">
+            React App
+          </Link>
+          <button
+            onClick={toggleMenu}
+            className="p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            aria-label="Toggle menu"
+          >
+            <div className="w-6 h-6 flex flex-col justify-center space-y-1.5">
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${
+                  isOpen ? 'rotate-45 translate-y-2' : ''
+                }`}
+              />
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${isOpen ? 'opacity-0' : ''}`}
+              />
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${
+                  isOpen ? '-rotate-45 -translate-y-2' : ''
+                }`}
+              />
+            </div>
+          </button>
+        </div>
+        {isOpen && (
+          <div className="pb-4">
+            <div className="flex flex-col space-y-2">
+              {navigationRoutes.map(item => (
+                <Link
+                  key={item.path}
+                  to={item.path}
+                  onClick={() => setIsOpen(false)}
+                  className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                    isActive(item.path)
+                      ? 'bg-blue-100 text-blue-700'
+                      : 'text-gray-700 hover:bg-gray-100'
+                  }`}
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+}

package/src/force-app/main/default/webapplications/base-react-app/src/router-utils.tsx

@@ -0,0 +1,35 @@
+import type { RouteObject } from 'react-router';
+import { routes } from './routes';
+
+export type RouteWithFullPath = RouteObject & { fullPath: string };
+
+const flatMapRoutes = (
+  route: RouteObject,
+  parentPath: string = ''
+): RouteWithFullPath[] => {
+  let fullPath: string;
+
+  if (route.index) {
+    fullPath = parentPath || '/';
+  } else if (route.path) {
+    if (route.path.startsWith('/')) {
+      fullPath = route.path;
+    } else {
+      fullPath =
+        parentPath === '/' ? `/${route.path}` : `${parentPath}/${route.path}`;
+    }
+  } else {
+    fullPath = parentPath;
+  }
+
+  const routeWithPath = { ...route, fullPath };
+
+  const childRoutes =
+    route.children?.flatMap(child => flatMapRoutes(child, fullPath)) || [];
+
+  return [routeWithPath, ...childRoutes];
+};
+
+export const getAllRoutes = (): RouteWithFullPath[] => {
+  return routes.flatMap(route => flatMapRoutes(route));
+};

package/src/force-app/main/default/webapplications/base-react-app/src/routes.tsx

@@ -1,7 +1,6 @@
 import type { RouteObject } from 'react-router';
 import AppLayout from '@/appLayout';
 import Home from './pages/Home';
-import About from './pages/About';
 import NotFound from './pages/NotFound';
 
 export const routes: RouteObject[] = [
@@ -14,11 +13,6 @@ export const routes: RouteObject[] = [
         element: <Home />,
         handle: { showInNavigation: true, label: 'Home' },
       },
-      {
-        path: 'about',
-        element: <About />,
-        handle: { showInNavigation: true, label: 'About' },
-      },
       {
         path: '*',
         element: <NotFound />,