@schandlergarcia/sf-web-components 1.9.48 → 1.9.52

package/scripts/postinstall.mjs

@@ -227,6 +227,92 @@ 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 schema.graphql
+  const schemaSource = path.join(dataSourceDir, 'schema.graphql');
+  const schemaTarget = path.join(cwd, 'schema.graphql');
+
+  if (fs.existsSync(schemaSource)) {
+    try {
+      fs.copyFileSync(schemaSource, schemaTarget);
+      console.log('  ✓ Installed schema.graphql (pre-built from sample data)');
+      dataFilesInstalled++;
+    } catch (error) {
+      console.error(`  ✗ Failed to install schema.graphql: ${error.message}`);
+    }
+  }
+
+  // Copy engine-command-center-prd.md
+  const prdSource = path.join(dataSourceDir, 'engine-command-center-prd.md');
+  const prdTarget = path.join(cwd, 'engine-command-center-prd.md');
+
+  if (fs.existsSync(prdSource)) {
+    try {
+      fs.copyFileSync(prdSource, prdTarget);
+      console.log('  ✓ Installed engine-command-center-prd.md');
+      dataFilesInstalled++;
+    } catch (error) {
+      console.error(`  ✗ Failed to install engine-command-center-prd.md: ${error.message}`);
+    }
+  }
+}
+
+// Copy GraphQL schema generator script
+const scriptsSourceDir = path.join(packageRoot, 'scripts');
+const targetScriptsDir = path.join(cwd, 'scripts');
+
+console.log('\n📝 Installing GraphQL scripts...\n');
+
+let scriptsInstalled = 0;
+
+if (fs.existsSync(scriptsSourceDir)) {
+  // Create target scripts directory if it doesn't exist
+  if (!fs.existsSync(targetScriptsDir)) {
+    fs.mkdirSync(targetScriptsDir, { recursive: true });
+  }
+
+  // Copy generate-schema-from-sample.mjs
+  const generatorSource = path.join(scriptsSourceDir, 'generate-schema-from-sample.mjs');
+  const generatorTarget = path.join(targetScriptsDir, 'generate-schema-from-sample.mjs');
+
+  if (fs.existsSync(generatorSource)) {
+    try {
+      fs.copyFileSync(generatorSource, generatorTarget);
+      console.log('  ✓ Installed generate-schema-from-sample.mjs');
+      scriptsInstalled++;
+    } catch (error) {
+      console.error(`  ✗ Failed to install generate-schema-from-sample.mjs: ${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');
@@ -268,6 +354,12 @@ if (fs.existsSync(packageJsonPath)) {
       scriptsAdded.push('validate:dashboard');
     }
 
+    // Add the graphql:schema:sample script if it doesn't exist
+    if (!packageJson.scripts['graphql:schema:sample']) {
+      packageJson.scripts['graphql:schema:sample'] = 'node scripts/generate-schema-from-sample.mjs';
+      scriptsAdded.push('graphql:schema:sample');
+    }
+
     if (scriptsAdded.length > 0) {
       fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n', 'utf-8');
       scriptsAdded.forEach(script => {
@@ -359,6 +451,8 @@ 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 (including schema.graphql)`);
+console.log(`  - Installed ${scriptsInstalled} GraphQL scripts`);
 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,331 @@ 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 and schema ──────────────────────────────
+
+# 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"
+  PACKAGE_SCHEMA="node_modules/@schandlergarcia/sf-web-components/data/schema.graphql"
+elif [ -f "$SCRIPT_DIR/../data/engine-sample-data.js" ]; then
+  # Running from package source
+  PACKAGE_DATA="$SCRIPT_DIR/../data/engine-sample-data.js"
+  PACKAGE_SCHEMA="$SCRIPT_DIR/../data/schema.graphql"
+else
+  echo "  ⚠ Could not find engine-sample-data.js in package"
+  PACKAGE_DATA=""
+  PACKAGE_SCHEMA=""
+fi
+
+if [ -n "$PACKAGE_DATA" ] && [ -f "$PACKAGE_DATA" ]; then
+  cp "$PACKAGE_DATA" "$ENGINE_DATA"
+  echo "  ✓ Engine sample data restored"
+else
+  echo "  ⚠ Skipped sample data (package data not found)"
+fi
+
+# Restore schema.graphql
+SCHEMA_FILE="schema.graphql"
+echo "→ Restoring ${SCHEMA_FILE}..."
+
+if [ -n "$PACKAGE_SCHEMA" ] && [ -f "$PACKAGE_SCHEMA" ]; then
+  cp "$PACKAGE_SCHEMA" "$SCHEMA_FILE"
+  echo "  ✓ GraphQL schema restored (pre-built from sample data)"
+else
+  echo "  ⚠ Skipped schema (package schema not found)"
+fi
+
+# Restore engine-command-center-prd.md
+PRD_FILE="engine-command-center-prd.md"
+echo "→ Restoring ${PRD_FILE}..."
+
+# Detect package location for PRD
+if [ -d "node_modules/@schandlergarcia/sf-web-components/data" ]; then
+  PACKAGE_PRD="node_modules/@schandlergarcia/sf-web-components/data/engine-command-center-prd.md"
+elif [ -f "$SCRIPT_DIR/../data/engine-command-center-prd.md" ]; then
+  # Running from package source
+  PACKAGE_PRD="$SCRIPT_DIR/../data/engine-command-center-prd.md"
+else
+  PACKAGE_PRD=""
+fi
+
+if [ -n "$PACKAGE_PRD" ] && [ -f "$PACKAGE_PRD" ]; then
+  cp "$PACKAGE_PRD" "$PRD_FILE"
+  echo "  ✓ Engine PRD restored"
+else
+  echo "  ⚠ Skipped PRD (package PRD 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 "║     • GraphQL schema (schema.graphql)          ║"
+echo "║     • Engine PRD (engine-command-center-prd.md)║"
 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)             ║"