@schandlergarcia/sf-web-components 1.9.48 → 1.9.50

package/CHANGELOG.md

@@ -5,6 +5,85 @@ 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.50] - 2026-04-01
+
+### Added
+- **scripts/postinstall.mjs** - Now copies engine-sample-data.js to src/data/ on installation
+  - Issue: Phase 2 of Engine PRD required manually creating sample data file
+  - Solution: Automatically install pre-built sample data during package setup
+  - Sample data includes all Salesforce-shaped records and dashboard-ready derivatives
+  - File location: `src/data/engine-sample-data.js` (31KB of ready-to-use data)
+  - Eliminates manual data creation step from Phase 2 build process
+
+- **scripts/reset-command-center.sh** - Now restores engine-sample-data.js during reset
+  - Issue: Reset could leave app with modified or missing sample data
+  - Solution: Added step 10 that copies fresh engine-sample-data.js from package
+  - Handles both installed package and source package locations
+  - Ensures consistent data state across resets
+
+### Changed
+- **engine-command-center-prd.md** - Updated Phase 2 prompt to use pre-installed data
+  - Before: "Create `src/data/engine-sample-data.js` with travelers, flights..."
+  - After: "Build components using the pre-installed sample data at `src/data/engine-sample-data.js`"
+  - Simplified Phase 2: just import and use, no data creation needed
+
+- **Postinstall summary** - Now reports data files installed
+  - Added line: "Installed X sample data files"
+
+- **Reset success message** - Now highlights sample data restoration
+  - Added: "Engine sample data (engine-sample-data.js)"
+
+### Rationale
+The engine-sample-data.js file (31KB) contains complete, dashboard-ready data for all Engine Travel Command Center components:
+- Raw Salesforce records (Contact, Trip__c, Flight__c, Booking__c, Disruption__c, etc.)
+- Pre-computed dashboard derivatives (MAP_MARKERS, MAP_ARCS, TRAVELER_CARDS, etc.)
+- All field names match the org schema for easy live-data swap in Phase 3
+
+Installing this automatically:
+- Eliminates a 30+ minute manual data-creation step from Phase 2
+- Ensures all developers use the same sample data
+- Makes the Phase 2 prompt simpler and faster
+- Consistent with how we handle other templates (Home.tsx, routes.tsx, etc.)
+
+Restoring on reset:
+- Prevents issues where modified sample data breaks demo builds
+- Keeps data in sync with global.css, templates, and structure
+- Allows developers to experiment with data changes and easily revert
+
+---
+
+## [1.9.49] - 2026-04-01
+
+### Added
+- **scripts/reset-command-center.sh** - Now restores Engine-branded global.css during reset
+  - Issue: Reset didn't touch global.css, leaving inconsistent styling state
+  - Solution: Added step 9 that writes complete Engine-branded global.css template
+  - Includes all Engine brand tokens:
+    - `--color-engine-*` tokens (teal, coral, green, savings, etc.)
+    - `--color-brand-*` palette (12 teal shades from 50-950)
+    - Inter font stack (`--font-sans`)
+    - JetBrains Mono (`--font-mono`)
+    - Engine border radius tokens (`--radius-pill`, `--radius-card`)
+    - Complete `.heroui-scope` theme overrides with Engine colors
+  - Ensures consistent Engine branding across all reset operations
+  - Template sourced from enginewebexperience production configuration
+
+### Changed
+- **Reset success message** - Updated to highlight Engine branding restoration
+  - Before: "Everything preserved: Theme (global.css + initialMode)"
+  - After: "Restored: Engine brand theme (global.css)" with brand details
+  - Clarifies that reset actively restores Engine branding, not just preserves it
+
+### Rationale
+The reset script is tooling specifically for Engine Travel Command Center development. Making it restore Engine branding by default is consistent with:
+- The script's existing opinionated behavior (specific templates for Home, Search, routes)
+- The engine-command-center-prd.md PRD section 3 which specifies Engine brand tokens
+- The fact that the script lives in sf-web-components package used for Engine dashboards
+
+This eliminates a common source of confusion where developers would reset the app structure but be left with mismatched or baseline styling.
+
+---
+
 ## Critical History: Component Naming Crisis (v1.9.29 - v1.9.42)
 
 ### The Problem

package/package.json

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

package/scripts/postinstall.mjs

@@ -227,6 +227,35 @@ if (fs.existsSync(templatesDir)) {
   }
 }
 
+// Copy sample data files
+const dataSourceDir = path.join(packageRoot, 'data');
+const targetDataDir = path.join(cwd, 'src/data');
+
+console.log('\n📊 Installing sample data files...\n');
+
+let dataFilesInstalled = 0;
+
+if (fs.existsSync(dataSourceDir)) {
+  // Create target data directory if it doesn't exist
+  if (!fs.existsSync(targetDataDir)) {
+    fs.mkdirSync(targetDataDir, { recursive: true });
+  }
+
+  // Copy engine-sample-data.js
+  const engineDataSource = path.join(dataSourceDir, 'engine-sample-data.js');
+  const engineDataTarget = path.join(targetDataDir, 'engine-sample-data.js');
+
+  if (fs.existsSync(engineDataSource)) {
+    try {
+      fs.copyFileSync(engineDataSource, engineDataTarget);
+      console.log('  ✓ Installed engine-sample-data.js');
+      dataFilesInstalled++;
+    } catch (error) {
+      console.error(`  ✗ Failed to install engine-sample-data.js: ${error.message}`);
+    }
+  }
+}
+
 // Copy routes.tsx template with full configuration
 const routesTemplatePath = path.join(packageRoot, 'src/templates/config/routes.tsx.template');
 const routesPath = path.join(cwd, 'src/routes.tsx');
@@ -359,6 +388,7 @@ console.log('\n📊 Summary:');
 console.log(`  - Copied ${componentsCopied} UI components`);
 console.log(`  - Updated ${filesUpdated} files`);
 console.log(`  - Installed ${templatesInstalled} page templates`);
+console.log(`  - Installed ${dataFilesInstalled} sample data files`);
 console.log(`  - Installed CommandCenter.tsx for dashboard management`);
 console.log(`  - Added "npm run reset:command-center" script`);
 console.log(`  - Installed AI assistant rules for command center building`);

package/scripts/reset-command-center.sh

@@ -402,17 +402,294 @@ echo "→ Cleaning caches…"
 rm -rf node_modules/.vite 2>/dev/null && echo "  ✓ Cleared Vite cache" || true
 echo ""
 
+# ── 9. Restore Engine-branded global.css ────────────────────────────────────
+
+# Ensure src/styles directory exists
+mkdir -p src/styles
+
+GLOBAL_CSS="src/styles/global.css"
+echo "→ Restoring Engine-branded ${GLOBAL_CSS}..."
+
+cat > "$GLOBAL_CSS" << 'GLOBAL_CSS_EOF'
+@import '@heroui/styles';
+
+@layer base {
+  html,
+  body,
+  #root {
+    @apply min-h-screen;
+  }
+
+  body {
+    @apply antialiased bg-white;
+  }
+}
+
+@import 'tw-animate-css';
+@import 'shadcn/tailwind.css';
+
+@custom-variant dark (&:is(.dark *));
+
+@source "../components/library";
+@source "../components/pages";
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Engine brand palette */
+  --color-engine-black: #111111;
+  --color-engine-teal: #5BC8C8;
+  --color-engine-green: #3DAB5F;
+  --color-engine-coral: #FF5722;
+  --color-engine-orange: #F59E0B;
+  --color-engine-savings: #16A34A;
+  --color-engine-bg: #F7F8FA;
+  --color-engine-border: #E5E7EB;
+  --color-engine-text: #111111;
+  --color-engine-muted: #6B7280;
+  --color-engine-label: #9CA3AF;
+
+  /* Engine teal brand palette */
+  --color-brand-50:  #ECFDF9;
+  --color-brand-100: #D1FAF0;
+  --color-brand-200: #A7F3E1;
+  --color-brand-300: #6EE7C8;
+  --color-brand-400: #34D3AB;
+  --color-brand-500: #5BC8C8;
+  --color-brand-600: #0D9488;
+  --color-brand-700: #0F766E;
+  --color-brand-800: #115E59;
+  --color-brand-900: #134E4A;
+  --color-brand-950: #042F2E;
+
+  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+
+  /* Engine border radius tokens */
+  --radius-pill: 9999px;
+  --radius-card: 10px;
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/*
+ * Restore HeroUI theme variables inside the Command Center scope.
+ * shadcn redefines --muted, --accent, --accent-foreground with different
+ * semantics (bg colors vs text colors). This scope restores HeroUI's values
+ * so HeroUI components render correctly.
+ */
+.heroui-scope {
+  /* Engine HeroUI theme overrides */
+  --primary: #000000;
+  --primary-foreground: oklch(0.9911 0 0);
+  --secondary: #5BC8C8;
+  --secondary-foreground: oklch(0.2103 0.0059 285.89);
+  --success: #16A34A;
+  --success-foreground: oklch(0.9911 0 0);
+  --warning: #F59E0B;
+  --warning-foreground: oklch(0.2103 0.0059 285.89);
+  --danger: #FF5722;
+  --danger-foreground: oklch(0.9911 0 0);
+
+  --muted: oklch(0.5517 0.0138 285.94);
+  --accent: oklch(0.6204 0.195 253.83);
+  --accent-foreground: oklch(0.9911 0 0);
+  --background: oklch(0.9702 0 0);
+  --foreground: oklch(0.2103 0.0059 285.89);
+  --default: oklch(94% 0.001 286.375);
+  --default-foreground: oklch(0.2103 0.0059 285.89);
+  --border: oklch(90% 0.004 286.32);
+  --separator: oklch(92% 0.004 286.32);
+  --segment: oklch(100% 0 0);
+  --segment-foreground: oklch(0.2103 0.0059 285.89);
+  --surface: oklch(100% 0 0);
+  --surface-foreground: oklch(0.2103 0.0059 285.89);
+  --overlay: oklch(100% 0 0);
+  --overlay-foreground: oklch(0.2103 0.0059 285.89);
+  --focus: oklch(0.6204 0.195 253.83);
+  --link: oklch(0.2103 0.0059 285.89);
+}
+
+.dark .heroui-scope,
+.heroui-scope.dark {
+  --muted: oklch(70.5% 0.015 286.067);
+  --background: oklch(12% 0.005 285.823);
+  --foreground: oklch(0.9911 0 0);
+  --default: oklch(27.4% 0.006 286.033);
+  --default-foreground: oklch(0.9911 0 0);
+  --border: oklch(28% 0.006 286.033);
+  --separator: oklch(25% 0.006 286.033);
+  --segment: oklch(0.3964 0.01 285.93);
+  --segment-foreground: oklch(0.9911 0 0);
+  --surface: oklch(0.2103 0.0059 285.89);
+  --surface-foreground: oklch(0.9911 0 0);
+  --overlay: oklch(0.2103 0.0059 285.89);
+  --overlay-foreground: oklch(0.9911 0 0);
+  --warning: oklch(0.8203 0.1388 76.34);
+  --warning-foreground: oklch(0.2103 0.0059 285.89);
+  --danger: oklch(0.594 0.1967 24.63);
+  --danger-foreground: oklch(0.9911 0 0);
+  --focus: oklch(0.6204 0.195 253.83);
+  --link: oklch(0.9911 0 0);
+}
+GLOBAL_CSS_EOF
+
+echo "  ✓ Engine branding restored"
+echo ""
+
+# ── 10. Restore Engine sample data ──────────────────────────────────────────
+
+# Ensure src/data directory exists
+mkdir -p src/data
+
+ENGINE_DATA="src/data/engine-sample-data.js"
+echo "→ Restoring ${ENGINE_DATA}..."
+
+# Detect package location
+if [ -d "node_modules/@schandlergarcia/sf-web-components/data" ]; then
+  PACKAGE_DATA="node_modules/@schandlergarcia/sf-web-components/data/engine-sample-data.js"
+elif [ -f "$SCRIPT_DIR/../data/engine-sample-data.js" ]; then
+  # Running from package source
+  PACKAGE_DATA="$SCRIPT_DIR/../data/engine-sample-data.js"
+else
+  echo "  ⚠ Could not find engine-sample-data.js in package"
+  PACKAGE_DATA=""
+fi
+
+if [ -n "$PACKAGE_DATA" ] && [ -f "$PACKAGE_DATA" ]; then
+  cp "$PACKAGE_DATA" "$ENGINE_DATA"
+  echo "  ✓ Engine sample data restored"
+else
+  echo "  ⚠ Skipped (package data not found)"
+fi
+
+echo ""
+
 # ── Done ─────────────────────────────────────────────────────────────────────
 
 echo "╔════════════════════════════════════════════════╗"
 echo "║   ✓ Reset complete!                             ║"
 echo "║                                                ║"
-echo "║   Everything preserved:                        ║"
-echo "║     • Theme (global.css + initialMode)         ║"
+echo "║   Restored:                                    ║"
+echo "║     • Engine brand theme (global.css)          ║"
+echo "║       - Teal brand palette (#5BC8C8)           ║"
+echo "║       - Inter font stack                       ║"
+echo "║       - HeroUI Engine theme overrides          ║"
+echo "║     • Engine sample data (engine-sample-data.js)║"
 echo "║     • Component library (cards, charts, etc.)  ║"
 echo "║     • HeroUI wrappers & theme providers        ║"
 echo "║     • Salesforce SDK stubs for local dev       ║"
-echo "║     • All styles & dependencies                ║"
 echo "║                                                ║"
 echo "║   Layout:                                      ║"
 echo "║     /         → Home (search page)             ║"