@schandlergarcia/sf-web-components 1.9.23 → 1.9.25

package/.a4drules/features/command-center-dashboard-rule.md

@@ -43,4 +43,4 @@ You MUST load the **command-center-builder** and **component-library** skills be
 
 14. **Heroicon names** — common correct names: `PaperAirplaneIcon` (not PlaneIcon), `BuildingOfficeIcon` (not HotelIcon), `BanknotesIcon` (not MoneyIcon), `ExclamationTriangleIcon` (not AlertIcon), `UserIcon` (not PersonIcon).
 
-15. **Wire the dashboard as the home page.** After creating your dashboard and updating `CommandCenter.tsx`, also update `src/routes.tsx`: set `Home` as the index route (it renders CommandCenter which renders your dashboard) and move `Search` to `/search`. The dashboard must be the first thing users see at `/`.
+15. **Wire the dashboard as the home page.** After creating your dashboard and updating `CommandCenter.tsx`, you MUST also update `src/pages/Home.tsx` to render `CommandCenter` (replace any search interface with `import CommandCenter from "@/components/workspace/CommandCenter"; export default function HomePage() { return <CommandCenter />; }`), and update `src/routes.tsx` to set `Home` as the index route and move `Search` to `/search`. The dashboard must be the first thing users see at `/`.

package/.a4drules/skills/command-center-builder/SKILL.md

@@ -183,6 +183,16 @@ export default function CommandCenter() {
 }
 ```
 
+**Step 2.5:** Update `Home.tsx` to render `CommandCenter`:
+```tsx
+// src/pages/Home.tsx
+import CommandCenter from "@/components/workspace/CommandCenter";
+
+export default function HomePage() {
+  return <CommandCenter />;
+}
+```
+
 **Step 3:** Update `src/routes.tsx` to make the dashboard the home page. Replace the Search page index route with the Home/CommandCenter route:
 ```tsx
 // src/routes.tsx — change the index route
@@ -203,7 +213,8 @@ The `Home` page renders `CommandCenter`, which renders your dashboard. The Searc
 **Verify:** After writing all files, confirm:
 1. Your dashboard `.tsx` file exists in `src/pages/`
 2. `CommandCenter.tsx` (in `src/components/workspace/`) imports your dashboard (not `BlankDashboard`)
-3. `src/routes.tsx` has `Home` as the index route and `Search` at `/search`
+3. `Home.tsx` (in `src/pages/`) imports and renders `CommandCenter` (not search interface)
+4. `src/routes.tsx` has `Home` as the index route and `Search` at `/search`
 
 ## Page Structure
 

package/package.json

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

package/scripts/postinstall.mjs

@@ -256,12 +256,25 @@ if (fs.existsSync(packageJsonPath)) {
     }
 
     // Add the reset:command-center script if it doesn't exist
+    let scriptsAdded = [];
     if (!packageJson.scripts['reset:command-center']) {
       packageJson.scripts['reset:command-center'] = 'bash node_modules/@schandlergarcia/sf-web-components/scripts/reset-command-center.sh';
+      scriptsAdded.push('reset:command-center');
+    }
+
+    // Add the validate:dashboard script if it doesn't exist
+    if (!packageJson.scripts['validate:dashboard']) {
+      packageJson.scripts['validate:dashboard'] = 'bash node_modules/@schandlergarcia/sf-web-components/scripts/validate-dashboard.sh';
+      scriptsAdded.push('validate:dashboard');
+    }
+
+    if (scriptsAdded.length > 0) {
       fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n', 'utf-8');
-      console.log('  ✓ Added "reset:command-center" script to package.json');
+      scriptsAdded.forEach(script => {
+        console.log(`  ✓ Added "${script}" script to package.json`);
+      });
     } else {
-      console.log('  ℹ Script "reset:command-center" already exists');
+      console.log('  ℹ Scripts already exist');
     }
   } catch (error) {
     console.error(`  ✗ Failed to update package.json: ${error.message}`);

package/scripts/validate-dashboard.sh

@@ -21,8 +21,8 @@ else
 fi
 cd "$ROOT"
 
-PAGES_DIR="src/components/pages"
-TRAVEL_DIR="src/components/travel"
+PAGES_DIR="src/pages"
+WORKSPACE_DIR="src/components/workspace"
 ERRORS=0
 WARNINGS=0
 
@@ -40,8 +40,11 @@ echo ""
 
 echo "── Wiring ──"
 
-WRAPPER="$PAGES_DIR/CommandCenter.tsx"
-if grep -q 'BlankDashboard' "$WRAPPER"; then
+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
   red "CommandCenter.tsx still imports BlankDashboard — no dashboard is wired up"
   ERRORS=$((ERRORS + 1))
 else
@@ -51,19 +54,17 @@ echo ""
 
 # ── 2. Find all dashboard files to scan ──────────────────────────────────────
 
-# Collect all .jsx/.tsx in pages/ and travel/ dirs (excluding BlankDashboard, HelloWorld, CommandCenter)
+# Collect all .tsx in pages/ dir (excluding BlankDashboard, Home, NotFound, Search)
 SCAN_FILES=()
-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 [ -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
 
 if [ ${#SCAN_FILES[@]} -eq 0 ]; then
   yellow "No dashboard files found to scan"
@@ -234,14 +235,14 @@ echo ""
 
 # ── 10. Check file extensions ─────────────────────────────────────────────────
 
-echo "── File extensions (dashboard pages should be .jsx) ──"
+echo "── File extensions (dashboard pages MUST be .tsx) ──"
 
 for f in "${SCAN_FILES[@]}"; do
   base=$(basename "$f")
 
-  if [[ "$f" == *.tsx ]] && [[ "$f" == *components/pages* || "$f" == *components/travel* ]]; then
-    yellow "$base: dashboard component uses .tsx — convention is .jsx"
-    WARNINGS=$((WARNINGS + 1))
+  if [[ "$f" == *.jsx ]]; then
+    red "$base: dashboard uses .jsx — this is a TypeScript project, all React components MUST use .tsx"
+    ERRORS=$((ERRORS + 1))
   fi
 done
 echo ""