@schandlergarcia/sf-web-components 1.9.55 → 1.9.57

package/CHANGELOG.md

@@ -5,6 +5,48 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.9.57] - 2026-04-01
+
+### Fixed
+- **src/templates/pages/Home.tsx.template** - Restored "Browse All Accounts" button
+  - Issue: v1.9.56 removed the Browse All button thinking it was broken
+  - Reality: The postinstall routes.tsx.template DOES have /accounts route (pointing to __examples__/AccountSearch)
+  - The button should exist and work correctly after postinstall
+  - Changed title from "Search" to "Account Search" 
+  - Changed button text from "Browse All" to "Browse All Accounts"
+  - Now matches the __examples__/pages/Home.tsx reference implementation
+
+- **scripts/reset-command-center.sh** - Added /accounts route to reset
+  - Issue: Reset routes.tsx didn't include /accounts route, causing Browse All button → 404
+  - Solution: Updated reset routes.tsx to match postinstall routes.tsx.template
+  - Now includes routes for: Home (→ __examples__/Home), /accounts (→ __examples__/AccountSearch), /accounts/:recordId (→ __examples__/AccountObjectDetailPage)
+  - Also updated reset Home.tsx template to restore Browse All button (even though routes points to __examples__/Home)
+
+### Context
+The correct architecture (matching react5 and postinstall):
+- Home route points to `features/object-search/__examples__/pages/Home.tsx` (has Browse All button)
+- /accounts route points to `features/object-search/__examples__/pages/AccountSearch.tsx` (account list page)
+- /accounts/:recordId route points to `features/object-search/__examples__/pages/AccountObjectDetailPage.tsx` (detail page)
+- All use shadcn Button/Input (correct for outer app context)
+
+## [1.9.56] - 2026-04-01
+
+### Fixed
+- **scripts/reset-command-center.sh** - Fixed reset script creating broken Home.tsx
+  - Issue 1: Home.tsx template used UIButton/UIInput (command center components) instead of shadcn Button/Input (outer app components)
+  - Issue 2: Home.tsx "Browse All" button navigated to `/accounts` route that doesn't exist after reset → 404
+  - Issue 3: Search button navigated to `/accounts` instead of `/search`
+  - Solution: Updated Home.tsx template in reset script to:
+    - Use shadcn `Button`/`Input` from `@/components/ui/` (correct for outer app context)
+    - Removed "Browse All" button (baseline state = no accounts feature)
+    - Changed search to navigate to `/search?q=...` instead of `/accounts`
+  - Now reset creates a working baseline app with no 404 errors
+
+### Context
+The reset script creates a baseline app state (Home search page + Search page + BlankDashboard). The routes.tsx reset only includes `/` (Home) and `/search` (Search) - no `/accounts` route. But Home.tsx was trying to navigate to `/accounts`, causing 404.
+
+The postinstall routes.tsx.template DOES include `/accounts` route (pointing to __examples__/AccountSearch), but the reset script deliberately overwrites this with a simpler baseline that doesn't include accounts functionality.
+
 ## [1.9.55] - 2026-04-01
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.9.55",
+  "version": "1.9.57",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",

package/scripts/reset-command-center.sh

@@ -152,8 +152,8 @@ echo "→ Restoring ${HOME} from template..."
 cat > "$HOME" << 'HOME_EOF'
 import { useState } from "react";
 import { useNavigate } from "react-router";
-import UIInput from '@/components/library/ui/UIInput';
-import UIButton from '@/components/library/ui/UIButton';
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 import { Search } from "lucide-react";
 
 export default function HomePage() {
@@ -180,13 +180,13 @@ export default function HomePage() {
 		<div className="flex min-h-[80vh] items-center justify-center px-4 sm:px-6 lg:px-8 bg-slate-50 dark:bg-slate-950 transition-colors">
 			<div className="w-full max-w-4xl">
 				<div className="text-center mb-8">
-					<h1 className="text-4xl font-bold text-slate-900 dark:text-slate-50 mb-4">Search</h1>
-					<p className="text-lg text-slate-600 dark:text-slate-300">Find records across your organization.</p>
+					<h1 className="text-4xl font-bold text-slate-900 dark:text-slate-50 mb-4">Account Search</h1>
+					<p className="text-lg text-slate-600 dark:text-slate-300">Search by name, phone, or industry.</p>
 				</div>
 				<div className="flex flex-col gap-4">
 					<div className="relative">
 						<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
-						<UIInput
+						<Input
 							type="text"
 							value={searchQuery}
 							onChange={(e) => setSearchQuery(e.target.value)}
@@ -196,12 +196,12 @@ export default function HomePage() {
 						/>
 					</div>
 					<div className="flex gap-3 justify-center">
-						<UIButton onClick={handleSearch} variant="primary">
+						<Button onClick={handleSearch}>
 							Search
-						</UIButton>
-						<UIButton onClick={() => navigate('/accounts')} variant="secondary">
-							Browse All
-						</UIButton>
+						</Button>
+						<Button onClick={() => navigate('/accounts')} variant="outline">
+							Browse All Accounts
+						</Button>
 					</div>
 				</div>
 			</div>
@@ -250,40 +250,35 @@ echo "→ Updating ${ROUTES}..."
 
 cat > "$ROUTES" << 'ROUTES_EOF'
 import type { RouteObject } from 'react-router';
-import { lazy, Suspense } from "react";
-
-const AppLayout = lazy(() => import('./appLayout'));
-const Home = lazy(() => import('./pages/Home'));
-const Search = lazy(() => import('./pages/Search'));
-const NotFound = lazy(() => import('./pages/NotFound'));
-
-function SuspenseWrap({ children }: { children: React.ReactNode }) {
-  return <Suspense fallback={<div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">Loading...</div>}>{children}</Suspense>;
-}
+import AppLayout from './appLayout';
+import Home from './features/object-search/__examples__/pages/Home';
+import AccountSearch from './features/object-search/__examples__/pages/AccountSearch';
+import AccountObjectDetailPage from './features/object-search/__examples__/pages/AccountObjectDetailPage';
+import NotFound from './pages/NotFound';
 
 export const routes: RouteObject[] = [
   {
     path: "/",
-    element: (
-      <SuspenseWrap>
-        <AppLayout />
-      </SuspenseWrap>
-    ),
+    element: <AppLayout />,
     children: [
       {
         index: true,
-        element: <SuspenseWrap><Home /></SuspenseWrap>,
-        handle: { showInNavigation: true, showNavBar: true, label: 'Home' }
+        element: <Home />,
+        handle: { showInNavigation: true, label: "Home" }
       },
       {
-        path: "search",
-        element: <SuspenseWrap><Search /></SuspenseWrap>,
-        handle: { showInNavigation: true, showNavBar: true, label: 'Search' }
+        path: 'accounts',
+        element: <AccountSearch />,
+        handle: { showInNavigation: true, label: "Accounts" }
       },
       {
-        path: '*',
-        element: <SuspenseWrap><NotFound /></SuspenseWrap>
+        path: 'accounts/:recordId',
+        element: <AccountObjectDetailPage />
       },
+      {
+        path: '*',
+        element: <NotFound />
+      }
     ]
   }
 ];

package/src/templates/pages/Home.tsx.template

@@ -28,8 +28,8 @@ export default function HomePage() {
 		<div className="flex min-h-[80vh] items-center justify-center px-4 sm:px-6 lg:px-8 bg-slate-50 dark:bg-slate-950 transition-colors">
 			<div className="w-full max-w-4xl">
 				<div className="text-center mb-8">
-					<h1 className="text-4xl font-bold text-slate-900 dark:text-slate-50 mb-4">Search</h1>
-					<p className="text-lg text-slate-600 dark:text-slate-300">Find records across your organization.</p>
+					<h1 className="text-4xl font-bold text-slate-900 dark:text-slate-50 mb-4">Account Search</h1>
+					<p className="text-lg text-slate-600 dark:text-slate-300">Search by name, phone, or industry.</p>
 				</div>
 				<div className="flex flex-col gap-4">
 					<div className="relative">
@@ -48,7 +48,7 @@ export default function HomePage() {
 							Search
 						</Button>
 						<Button onClick={() => navigate('/accounts')} variant="outline">
-							Browse All
+							Browse All Accounts
 						</Button>
 					</div>
 				</div>