@schandlergarcia/sf-web-components 1.9.24 → 1.9.26

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

@@ -13,6 +13,10 @@ These rules are non-negotiable for all dashboard files in `src/pages/` and works
 
 You MUST load the **command-center-builder** and **component-library** skills before writing or editing dashboard pages. These skills contain the full component API reference and builder rules. Do not proceed without them.
 
+## When writing files
+
+**Write COMPLETE files only.** Every file you write must be syntactically valid from the first import to the final closing brace. Do NOT stop writing mid-file, mid-function, or mid-line. Every opened JSX tag must be closed. Every opened string must be closed. Every className attribute must be complete. Incomplete files cause build failures.
+
 ## Critical constraints
 
 1. **File extension MUST be `.tsx`** — This is a TypeScript project. All React components MUST use `.tsx` extension, never `.jsx`. All type definitions are available from the component library.

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

@@ -15,7 +15,7 @@ These rules apply when building dashboards rendered by `CommandCenter.tsx`. For
 
 **Every time you build a dashboard, you MUST follow these non-negotiable rules. Violations are the #1 cause of rejected dashboards.**
 
-1. **Actually write files to disk.** Use the file-writing tools to create `.tsx` files (NOT `.jsx`) in `src/pages/` and update `CommandCenter.tsx` to import your dashboard. This is a TypeScript project - all React components MUST use `.tsx` extension. If you only describe what you would build without creating the files, the dashboard will not render. Verify the files exist after writing them.
+1. **Actually write COMPLETE files to disk.** Use the file-writing tools to create `.tsx` files (NOT `.jsx`) in `src/pages/` and update `CommandCenter.tsx` to import your dashboard. This is a TypeScript project - all React components MUST use `.tsx` extension. **CRITICAL: Write the ENTIRE file from import statements through the closing brace `}` of the export statement. Do NOT stop mid-file, mid-function, or mid-line. Every JSX tag you open must be closed. Every string you open must be closed. Every className attribute must be complete.** If you only describe what you would build without creating the files, the dashboard will not render. Verify the files exist after writing them.
 
 2. **Use ONLY library components** from `@/components/library` for all cards, charts, tables, lists, and feeds. The library has 30+ components — there is no reason to hand-roll HTML. See the component table below.
 

package/package.json

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