@schandlergarcia/sf-web-components 1.9.28 → 1.9.30

package/scripts/reset-command-center.sh

@@ -15,15 +15,7 @@
 #
 set -euo pipefail
 
-# When run from npm script, use the current working directory (the consuming project)
-# When run directly from the package, navigate to parent
-if [ -d "node_modules/@schandlergarcia/sf-web-components" ]; then
-  # Running from consuming project
-  ROOT="$PWD"
-else
-  # Running from package itself
-  ROOT="$(cd "$(dirname "$0")/.." && pwd)"
-fi
+ROOT="$(cd "$(dirname "$0")/.." && pwd)"
 cd "$ROOT"
 
 echo ""
@@ -37,62 +29,14 @@ echo ""
 echo "→ Removing custom dashboards…"
 
 removed=0
-
-# Detect if we're in a webapp directory (inside SFDX project structure)
-# If so, also clean up SFDX project root paths
-SFDX_ROOT=""
-if [[ "$ROOT" == */force-app/main/default/webapplications/* ]]; then
-  # Extract SFDX project root (go up 5 levels: webapp/webapplications/default/main/force-app)
-  SFDX_ROOT="$(cd "$ROOT" && cd ../../../../../ && pwd)"
-  echo "  ℹ Detected SFDX project structure at $SFDX_ROOT"
-fi
-
-# Remove from src/pages/
-for f in src/pages/*Dashboard*.tsx src/pages/*Dashboard*.jsx; do
-  # Don't remove BlankDashboard
-  if [ -f "$f" ] && [[ "$(basename "$f")" != "BlankDashboard"* ]]; then
+for f in src/components/pages/*Dashboard*.jsx src/components/pages/*Dashboard*.tsx; do
+  if [ -f "$f" ]; then
     rm "$f"
-    echo "  ✓ Removed $(basename "$f") from webapp"
+    echo "  ✓ Removed $(basename "$f")"
     removed=$((removed + 1))
   fi
 done
 
-# Also remove from src/components/pages/ if it exists
-if [ -d "src/components/pages" ]; then
-  for f in src/components/pages/*Dashboard*.tsx src/components/pages/*Dashboard*.jsx; do
-    if [ -f "$f" ] && [[ "$(basename "$f")" != "BlankDashboard"* ]]; then
-      rm "$f"
-      echo "  ✓ Removed $(basename "$f") from webapp"
-      removed=$((removed + 1))
-    fi
-  done
-fi
-
-# If we're in SFDX structure, also check project root paths
-if [ -n "$SFDX_ROOT" ]; then
-  # Remove from SFDX_ROOT/src/pages/
-  if [ -d "$SFDX_ROOT/src/pages" ]; then
-    for f in "$SFDX_ROOT/src/pages/"*Dashboard*.tsx "$SFDX_ROOT/src/pages/"*Dashboard*.jsx; do
-      if [ -f "$f" ] && [[ "$(basename "$f")" != "BlankDashboard"* ]]; then
-        rm "$f"
-        echo "  ✓ Removed $(basename "$f") from SFDX root"
-        removed=$((removed + 1))
-      fi
-    done
-  fi
-
-  # Remove from SFDX_ROOT/src/components/pages/
-  if [ -d "$SFDX_ROOT/src/components/pages" ]; then
-    for f in "$SFDX_ROOT/src/components/pages/"*Dashboard*.tsx "$SFDX_ROOT/src/components/pages/"*Dashboard*.jsx; do
-      if [ -f "$f" ] && [[ "$(basename "$f")" != "BlankDashboard"* ]]; then
-        rm "$f"
-        echo "  ✓ Removed $(basename "$f") from SFDX root"
-        removed=$((removed + 1))
-      fi
-    done
-  fi
-fi
-
 if [ "$removed" -eq 0 ]; then
   echo "  (no custom dashboards found)"
 fi
@@ -100,10 +44,11 @@ echo ""
 
 # ── 2. Write the blank starter dashboard ────────────────────────────────────
 
-BLANK="src/pages/BlankDashboard.tsx"
+BLANK="src/components/pages/BlankDashboard.jsx"
 echo "→ Creating ${BLANK}..."
 
 cat > "$BLANK" << 'DASHBOARD_EOF'
+import React from "react";
 import { RocketLaunchIcon } from "@heroicons/react/24/outline";
 import { EmptyState } from "@/components/library";
 
@@ -127,12 +72,9 @@ echo ""
 # ── 3. Update CommandCenter.tsx to use BlankDashboard ────────────────────────
 #    Preserves theme initialMode if previously customized.
 
-WRAPPER="src/components/workspace/CommandCenter.tsx"
+WRAPPER="src/components/pages/CommandCenter.tsx"
 echo "→ Updating ${WRAPPER}..."
 
-# Create workspace directory if it doesn't exist
-mkdir -p "src/components/workspace"
-
 # Extract existing initialMode from AppThemeProvider (default: "light")
 THEME_MODE="light"
 if [ -f "$WRAPPER" ]; then
@@ -146,17 +88,19 @@ fi
 cat > "$WRAPPER" << WRAPPER_EOF
 import AppThemeProvider from "@/components/library/theme/AppThemeProvider";
 import DataModeProvider from "@/components/library/data/DataModeProvider";
-import { Toaster } from "sonner";
-import BlankDashboard from "../../pages/BlankDashboard";
+import { Toast } from "@heroui/react";
+import BlankDashboard from "./BlankDashboard";
 
 export default function CommandCenter() {
   return (
-    <AppThemeProvider initialMode="${THEME_MODE}">
-      <DataModeProvider initialMode="sample">
-        <BlankDashboard />
-        <Toaster position="bottom-right" />
-      </DataModeProvider>
-    </AppThemeProvider>
+    <div className="heroui-scope">
+      <AppThemeProvider initialMode="${THEME_MODE}">
+        <DataModeProvider initialMode="sample">
+          <BlankDashboard />
+          <Toast.Provider placement="bottom end" />
+        </DataModeProvider>
+      </AppThemeProvider>
+    </div>
   );
 }
 WRAPPER_EOF
@@ -164,73 +108,20 @@ WRAPPER_EOF
 echo "  ✓ Wired up BlankDashboard"
 echo ""
 
-# ── 4. Reset Home.tsx to render search interface ────────────────────────────
+# ── 4. Reset Home.tsx to render CommandCenter ────────────────────────────────
 
 HOME="src/pages/Home.tsx"
 echo "→ Updating ${HOME}..."
 
 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 { 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();
-		}
-	};
+import CommandCenter from "../components/pages/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>
-	);
+export default function Home() {
+	return <CommandCenter />;
 }
 HOME_EOF
 
-echo "  ✓ Home renders search interface"
+echo "  ✓ Home renders CommandCenter"
 echo ""
 
 # ── 5. Ensure Search.tsx page exists ─────────────────────────────────────────
@@ -239,60 +130,17 @@ SEARCH="src/pages/Search.tsx"
 echo "→ Updating ${SEARCH}..."
 
 cat > "$SEARCH" << 'SEARCH_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 { Search as SearchIcon } from "lucide-react";
+import { GlobalSearchInput } from "../features/global-search/components/search/GlobalSearchInput";
 
 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 bg-slate-50 dark:bg-slate-950 transition-colors">
+		<div className="flex min-h-[80vh] items-center justify-center px-4 sm:px-6 lg:px-8">
 			<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">
-						<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>
+				<GlobalSearchInput />
 			</div>
 		</div>
 	);
@@ -309,43 +157,178 @@ echo "→ Updating ${ROUTES}..."
 
 cat > "$ROUTES" << 'ROUTES_EOF'
 import type { RouteObject } from 'react-router';
-import Home from './pages/Home';
-import NotFound from './pages/NotFound';
-import AppLayout from './appLayout';
-import AccountSearch from "./features/object-search/__examples__/pages/AccountSearch";
-import AccountObjectDetail from "./features/object-search/__examples__/pages/AccountObjectDetailPage";
+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>;
+}
 
 export const routes: RouteObject[] = [
   {
     path: "/",
-    element: <AppLayout />,
+    element: (
+      <SuspenseWrap>
+        <AppLayout />
+      </SuspenseWrap>
+    ),
     children: [
       {
         index: true,
-        element: <Home />,
-        handle: { showInNavigation: true, showNavBar: true, label: "Home" }
+        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: "accounts",
-        element: <AccountSearch />
+        path: "test-acc",
+        element: <SuspenseWrap><TestAccPage /></SuspenseWrap>,
+        handle: { showInNavigation: true, label: "Test ACC" }
       },
       {
-        path: "accounts/:recordId",
-        element: <AccountObjectDetail />
+        path: "global-search/:query",
+        element: (
+					<SuspenseWrap>
+						<GlobalSearch />
+					</SuspenseWrap>
+				),
+        handle: { showInNavigation: false }
+      },
+      {
+        path: "object/:objectApiName/:recordId",
+        element: (
+					<SuspenseWrap>
+						<DetailPage />
+					</SuspenseWrap>
+				),
+        handle: { showInNavigation: false }
       },
       {
         path: '*',
-        element: <NotFound />
-      }
+        element: <SuspenseWrap><NotFound /></SuspenseWrap>
+      },
     ]
   }
 ];
 ROUTES_EOF
 
-echo "  ✓ Routes updated (Home at /)"
+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 ""
 
-# ── 7. Clear Vite cache ─────────────────────────────────────────────────────
+# ── 8. Clear Vite cache ─────────────────────────────────────────────────────
 
 echo "→ Cleaning caches…"
 rm -rf node_modules/.vite 2>/dev/null && echo "  ✓ Cleared Vite cache" || true
@@ -360,20 +343,16 @@ echo "║   Everything preserved:                        ║"
 echo "║     • Theme (global.css + initialMode)         ║"
 echo "║     • Component library (cards, charts, etc.)  ║"
 echo "║     • HeroUI wrappers & theme providers        ║"
-echo "║     • Authentication features                  ║"
+echo "║     • Salesforce SDK stubs for local dev       ║"
 echo "║     • All styles & dependencies                ║"
 echo "║                                                ║"
 echo "║   Layout:                                      ║"
-echo "║     /         → Search interface               ║"
-echo "║     /search   → Search interface (duplicate)   ║"
-echo "║     /accounts → Account search and browse      ║"
-echo "║                                                ║"
-echo "║   Search functionality:                        ║"
-echo "║     • Search button navigates to /accounts     ║"
-echo "║     • Enter key triggers search                ║"
-echo "║     • Browse All shows all accounts            ║"
+echo "║     /         → Home (CommandCenter dashboard) ║"
+echo "║     /search   → Search (global search input)  ║"
+echo "║     Nav bar on Home + Search pages only        ║"
 echo "║                                                ║"
 echo "║   Start building:                              ║"
+echo "║     Edit src/components/pages/BlankDashboard.jsx║"
 echo "║     npm run dev                                 ║"
 echo "╚════════════════════════════════════════════════╝"
 echo ""

package/scripts/validate-dashboard.sh

@@ -10,19 +10,11 @@
 #
 set -euo pipefail
 
-# When run from npm script, use the current working directory (the consuming project)
-# When run directly from the package, navigate to parent
-if [ -d "node_modules/@schandlergarcia/sf-web-components" ]; then
-  # Running from consuming project
-  ROOT="$PWD"
-else
-  # Running from package itself
-  ROOT="$(cd "$(dirname "$0")/.." && pwd)"
-fi
+ROOT="$(cd "$(dirname "$0")/.." && pwd)"
 cd "$ROOT"
 
-PAGES_DIR="src/pages"
-WORKSPACE_DIR="src/components/workspace"
+PAGES_DIR="src/components/pages"
+TRAVEL_DIR="src/components/travel"
 ERRORS=0
 WARNINGS=0
 
@@ -40,11 +32,8 @@ echo ""
 
 echo "── Wiring ──"
 
-WRAPPER="$WORKSPACE_DIR/CommandCenter.tsx"
-if [ ! -f "$WRAPPER" ]; then
-  red "CommandCenter.tsx not found at $WORKSPACE_DIR/"
-  ERRORS=$((ERRORS + 1))
-elif grep -q 'BlankDashboard' "$WRAPPER"; then
+WRAPPER="$PAGES_DIR/CommandCenter.tsx"
+if grep -q 'BlankDashboard' "$WRAPPER"; then
   red "CommandCenter.tsx still imports BlankDashboard — no dashboard is wired up"
   ERRORS=$((ERRORS + 1))
 else
@@ -54,17 +43,19 @@ echo ""
 
 # ── 2. Find all dashboard files to scan ──────────────────────────────────────
 
-# Collect all .tsx in pages/ dir (excluding BlankDashboard, Home, NotFound, Search)
+# Collect all .jsx/.tsx in pages/ and travel/ dirs (excluding BlankDashboard, HelloWorld, CommandCenter)
 SCAN_FILES=()
-if [ -d "$PAGES_DIR" ]; then
-  while IFS= read -r f; do
-    base=$(basename "$f")
-    case "$base" in
-      BlankDashboard.*|Home.*|NotFound.*|Search.*) continue ;;
-      *) SCAN_FILES+=("$f") ;;
-    esac
-  done < <(find "$PAGES_DIR" -maxdepth 1 -name "*.tsx" | sort)
-fi
+for dir in "$PAGES_DIR" "$TRAVEL_DIR" "src/pages"; do
+  if [ -d "$dir" ]; then
+    while IFS= read -r f; do
+      base=$(basename "$f")
+      case "$base" in
+        BlankDashboard.*|HelloWorld.*|CommandCenter.*|Home.*|NotFound.*|Search.*|TestAccPage.*) continue ;;
+        *) SCAN_FILES+=("$f") ;;
+      esac
+    done < <(find "$dir" -maxdepth 1 \( -name "*.jsx" -o -name "*.tsx" \) | sort)
+  fi
+done
 
 if [ ${#SCAN_FILES[@]} -eq 0 ]; then
   yellow "No dashboard files found to scan"
@@ -235,14 +226,14 @@ echo ""
 
 # ── 10. Check file extensions ─────────────────────────────────────────────────
 
-echo "── File extensions (dashboard pages MUST be .tsx) ──"
+echo "── File extensions (dashboard pages should be .jsx) ──"
 
 for f in "${SCAN_FILES[@]}"; do
   base=$(basename "$f")
 
-  if [[ "$f" == *.jsx ]]; then
-    red "$base: dashboard uses .jsx — this is a TypeScript project, all React components MUST use .tsx"
-    ERRORS=$((ERRORS + 1))
+  if [[ "$f" == *.tsx ]] && [[ "$f" == *components/pages* || "$f" == *components/travel* ]]; then
+    yellow "$base: dashboard component uses .tsx — convention is .jsx"
+    WARNINGS=$((WARNINGS + 1))
   fi
 done
 echo ""