@schandlergarcia/sf-web-components 1.2.16 → 1.2.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.2.16",
+  "version": "1.2.17",
   "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

@@ -122,14 +122,67 @@ HOME="src/pages/Home.tsx"
 echo "→ Updating ${HOME}..."
 
 cat > "$HOME" << 'HOME_EOF'
-import CommandCenter from "../components/pages/CommandCenter";
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import UIInput from '@/components/library/ui/UIInput';
+import UIButton from '@/components/library/ui/UIButton';
+import { Search } from "lucide-react";
+
+export default function HomePage() {
+	const [searchQuery, setSearchQuery] = useState("");
+	const navigate = useNavigate();
+
+	const handleSearch = () => {
+		const trimmed = searchQuery.trim();
+		if (trimmed) {
+			navigate(`/accounts?search=${encodeURIComponent(trimmed)}`);
+		} else {
+			navigate('/accounts');
+		}
+	};
+
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			handleSearch();
+		}
+	};
 
-export default function Home() {
-	return <CommandCenter />;
+	return (
+		<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>
+				</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
+							type="text"
+							value={searchQuery}
+							onChange={(e) => setSearchQuery(e.target.value)}
+							onKeyDown={handleKeyDown}
+							placeholder="Search..."
+							className="pl-10 w-full"
+						/>
+					</div>
+					<div className="flex gap-3 justify-center">
+						<UIButton onClick={handleSearch} variant="primary">
+							Search
+						</UIButton>
+						<UIButton onClick={() => navigate('/accounts')} variant="secondary">
+							Browse All
+						</UIButton>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
 }
 HOME_EOF
 
-echo "  ✓ Home renders CommandCenter"
+echo "  ✓ Home renders search interface"
 echo ""
 
 # ── 5. Ensure Search.tsx page exists ─────────────────────────────────────────
@@ -138,17 +191,60 @@ SEARCH="src/pages/Search.tsx"
 echo "→ Updating ${SEARCH}..."
 
 cat > "$SEARCH" << 'SEARCH_EOF'
-import { GlobalSearchInput } from "../features/global-search/components/search/GlobalSearchInput";
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import UIInput from '@/components/library/ui/UIInput';
+import UIButton from '@/components/library/ui/UIButton';
+import { Search as SearchIcon } from "lucide-react";
 
 export default function Search() {
+	const [searchQuery, setSearchQuery] = useState("");
+	const navigate = useNavigate();
+
+	const handleSearch = () => {
+		const trimmed = searchQuery.trim();
+		if (trimmed) {
+			navigate(`/accounts?search=${encodeURIComponent(trimmed)}`);
+		} else {
+			navigate('/accounts');
+		}
+	};
+
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			handleSearch();
+		}
+	};
+
 	return (
-		<div className="flex min-h-[80vh] items-center justify-center px-4 sm:px-6 lg:px-8">
+		<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>
 				</div>
-				<GlobalSearchInput />
+				<div className="flex flex-col gap-4">
+					<div className="relative">
+						<SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
+						<UIInput
+							type="text"
+							value={searchQuery}
+							onChange={(e) => setSearchQuery(e.target.value)}
+							onKeyDown={handleKeyDown}
+							placeholder="Search..."
+							className="pl-10 w-full"
+						/>
+					</div>
+					<div className="flex gap-3 justify-center">
+						<UIButton onClick={handleSearch} variant="primary">
+							Search
+						</UIButton>
+						<UIButton onClick={() => navigate('/accounts')} variant="secondary">
+							Browse All
+						</UIButton>
+					</div>
+				</div>
 			</div>
 		</div>
 	);
@@ -165,178 +261,33 @@ 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'));
-const TestAccPage = lazy(() => import("./pages/TestAccPage"));
-const GlobalSearch = lazy(() => import("./features/global-search/pages/GlobalSearch"));
-const DetailPage = lazy(() => import("./features/global-search/pages/DetailPage"));
-
-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 Home from './pages/Home';
+import NotFound from './pages/NotFound';
+import AuthAppLayout from "./features/authentication/layouts/AuthAppLayout";
 
 export const routes: RouteObject[] = [
   {
     path: "/",
-    element: (
-      <SuspenseWrap>
-        <AppLayout />
-      </SuspenseWrap>
-    ),
+    element: <AuthAppLayout />,
     children: [
       {
         index: true,
-        element: <SuspenseWrap><Home /></SuspenseWrap>,
-        handle: { showInNavigation: true, showNavBar: true, label: 'Home' }
-      },
-      {
-        path: "search",
-        element: <SuspenseWrap><Search /></SuspenseWrap>,
-        handle: { showInNavigation: true, showNavBar: true, label: 'Search' }
-      },
-      {
-        path: "test-acc",
-        element: <SuspenseWrap><TestAccPage /></SuspenseWrap>,
-        handle: { showInNavigation: true, label: "Test ACC" }
-      },
-      {
-        path: "global-search/:query",
-        element: (
-					<SuspenseWrap>
-						<GlobalSearch />
-					</SuspenseWrap>
-				),
-        handle: { showInNavigation: false }
-      },
-      {
-        path: "object/:objectApiName/:recordId",
-        element: (
-					<SuspenseWrap>
-						<DetailPage />
-					</SuspenseWrap>
-				),
-        handle: { showInNavigation: false }
+        element: <Home />,
+        handle: { showInNavigation: true, label: "Home" }
       },
       {
         path: '*',
-        element: <SuspenseWrap><NotFound /></SuspenseWrap>
-      },
+        element: <NotFound />
+      }
     ]
   }
 ];
 ROUTES_EOF
 
-echo "  ✓ Routes updated (Home at /, Search at /search, nav on both)"
-echo ""
-
-# ── 7. Reset appLayout.tsx (nav on Home/Search only) ─────────────────────────
-
-LAYOUT="src/appLayout.tsx"
-echo "→ Updating ${LAYOUT}..."
-
-cat > "$LAYOUT" << 'LAYOUT_EOF'
-import { AgentforceConversationClient } from "./components/AgentforceConversationClient";
-import { Outlet, Link, useLocation, useMatches } from "react-router";
-import { getAllRoutes } from "./router-utils";
-import { useState } from "react";
-
-export default function AppLayout() {
-	const [isOpen, setIsOpen] = useState(false);
-	const location = useLocation();
-	const matches = useMatches();
-
-	const showNavBar = matches.some(
-		(m) => (m.handle as Record<string, unknown>)?.showNavBar === true,
-	);
-
-	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 (
-		<>
-			{showNavBar && (
-				<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>
-			)}
-			<Outlet />
-			<AgentforceConversationClient />
-		</>
-	);
-}
-LAYOUT_EOF
-
-echo "  ✓ Layout updated (nav bar on Home/Search pages)"
+echo "  ✓ Routes updated (Home at /)"
 echo ""
 
-# ── 8. Clear Vite cache ─────────────────────────────────────────────────────
+# ── 7. Clear Vite cache ─────────────────────────────────────────────────────
 
 echo "→ Cleaning caches…"
 rm -rf node_modules/.vite 2>/dev/null && echo "  ✓ Cleared Vite cache" || true
@@ -351,16 +302,19 @@ echo "║   Everything preserved:                        ║"
 echo "║     • Theme (global.css + initialMode)         ║"
 echo "║     • Component library (cards, charts, etc.)  ║"
 echo "║     • HeroUI wrappers & theme providers        ║"
-echo "║     • Salesforce SDK stubs for local dev       ║"
+echo "║     • Authentication features                  ║"
 echo "║     • All styles & dependencies                ║"
 echo "║                                                ║"
 echo "║   Layout:                                      ║"
-echo "║     /         → Home (CommandCenter dashboard) ║"
-echo "║     /search   → Search (global search input)  ║"
-echo "║     Nav bar on Home + Search pages only        ║"
+echo "║     /         → Home (Search interface)        ║"
+echo "║     /accounts → Account search and browse      ║"
+echo "║                                                ║"
+echo "║   Search functionality:                        ║"
+echo "║     • Search button navigates to /accounts     ║"
+echo "║     • Enter key in search input triggers search║"
+echo "║     • Browse All button shows all accounts     ║"
 echo "║                                                ║"
 echo "║   Start building:                              ║"
-echo "║     Edit src/components/pages/BlankDashboard.jsx║"
 echo "║     npm run dev                                 ║"
 echo "╚════════════════════════════════════════════════╝"
 echo ""