@schandlergarcia/sf-web-components 2.0.0 → 2.2.0

package/scripts/apply-brand.mjs

@@ -0,0 +1,179 @@
+#!/usr/bin/env node
+
+/**
+ * apply-brand.mjs — Apply a brand theme to the project.
+ *
+ * Usage:
+ *   node scripts/apply-brand.mjs engine     # Apply Engine brand
+ *   node scripts/apply-brand.mjs --list     # List available brands
+ *   node scripts/apply-brand.mjs --reset    # Remove brand, restore neutral theme
+ *
+ * When run from a consuming project (via npm run brand:engine), the script
+ * detects the package location automatically.
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const arg = process.argv[2];
+
+if (!arg) {
+  console.error('Usage: node scripts/apply-brand.mjs <brand-name|--list|--reset>');
+  process.exit(1);
+}
+
+const cwd = process.cwd();
+const PACKAGE_NAME = '@schandlergarcia/sf-web-components';
+
+function findPackageRoot() {
+  const fromNodeModules = path.join(cwd, 'node_modules', PACKAGE_NAME);
+  if (fs.existsSync(fromNodeModules)) return fromNodeModules;
+
+  const fromScript = path.resolve(__dirname, '..');
+  if (fs.existsSync(path.join(fromScript, 'brands'))) return fromScript;
+
+  return null;
+}
+
+const packageRoot = findPackageRoot();
+if (!packageRoot) {
+  console.error('Could not find package root. Run from the project directory.');
+  process.exit(1);
+}
+
+const brandsDir = path.join(packageRoot, 'brands');
+
+if (arg === '--list') {
+  if (!fs.existsSync(brandsDir)) {
+    console.log('No brands available.');
+    process.exit(0);
+  }
+  const brands = fs.readdirSync(brandsDir).filter(d =>
+    fs.statSync(path.join(brandsDir, d)).isDirectory()
+  );
+  console.log(`Available brands: ${brands.join(', ') || '(none)'}`);
+  process.exit(0);
+}
+
+if (arg === '--reset') {
+  const neutralCSS = path.join(packageRoot, 'src/styles/global.css');
+  const targetCSS = path.join(cwd, 'src/styles/global.css');
+  if (fs.existsSync(neutralCSS)) {
+    fs.copyFileSync(neutralCSS, targetCSS);
+    console.log('  ✓ Restored neutral theme (global.css)');
+  }
+  const brandMarker = path.join(cwd, '.brand');
+  if (fs.existsSync(brandMarker)) fs.unlinkSync(brandMarker);
+  console.log('\n✅ Brand reset to neutral.\n');
+  process.exit(0);
+}
+
+const brandName = arg;
+const brandDir = path.join(brandsDir, brandName);
+
+if (!fs.existsSync(brandDir)) {
+  console.error(`Brand "${brandName}" not found in ${brandsDir}`);
+  const available = fs.existsSync(brandsDir)
+    ? fs.readdirSync(brandsDir).filter(d => fs.statSync(path.join(brandsDir, d)).isDirectory())
+    : [];
+  if (available.length) console.error(`Available: ${available.join(', ')}`);
+  process.exit(1);
+}
+
+console.log(`\n🎨 Applying "${brandName}" brand...\n`);
+
+let installed = 0;
+
+// 1. global.css → src/styles/global.css (always overwrite)
+const brandCSS = path.join(brandDir, 'global.css');
+const targetCSS = path.join(cwd, 'src/styles/global.css');
+if (fs.existsSync(brandCSS)) {
+  fs.mkdirSync(path.dirname(targetCSS), { recursive: true });
+  fs.copyFileSync(brandCSS, targetCSS);
+  console.log('  ✓ Brand theme applied (global.css)');
+  installed++;
+}
+
+// 2. Sample data files → src/data/
+const dataFiles = [
+  { src: 'engine-sample-data.js', dst: 'src/data/engine-sample-data.js' },
+  { src: 'engine-live-data.js', dst: 'src/data/engine-live-data.js' },
+  { src: 'partner-hub-sample-data.js', dst: 'src/data/partner-hub-sample-data.js' },
+];
+for (const { src, dst } of dataFiles) {
+  const srcPath = path.join(brandDir, src);
+  const dstPath = path.join(cwd, dst);
+  if (fs.existsSync(srcPath)) {
+    fs.mkdirSync(path.dirname(dstPath), { recursive: true });
+    fs.copyFileSync(srcPath, dstPath);
+    console.log(`  ✓ Installed ${dst}`);
+    installed++;
+  }
+}
+
+// 3. Hooks → src/hooks/
+const hooks = [
+  { src: 'useEngineLiveData.ts', dst: 'src/hooks/useEngineLiveData.ts' },
+  { src: 'useEvaAgent.ts', dst: 'src/hooks/useEvaAgent.ts' },
+];
+for (const { src, dst } of hooks) {
+  const srcPath = path.join(brandDir, src);
+  const dstPath = path.join(cwd, dst);
+  if (fs.existsSync(srcPath)) {
+    fs.mkdirSync(path.dirname(dstPath), { recursive: true });
+    fs.copyFileSync(srcPath, dstPath);
+    console.log(`  ✓ Installed ${dst}`);
+    installed++;
+  }
+}
+
+// 4. Config files → src/config/
+const configs = [
+  { src: 'agentApiConfig.ts', dst: 'src/config/agentApi.ts' },
+];
+for (const { src, dst } of configs) {
+  const srcPath = path.join(brandDir, src);
+  const dstPath = path.join(cwd, dst);
+  if (fs.existsSync(srcPath)) {
+    fs.mkdirSync(path.dirname(dstPath), { recursive: true });
+    fs.copyFileSync(srcPath, dstPath);
+    console.log(`  ✓ Installed ${dst}`);
+    installed++;
+  }
+}
+
+// 5. PRDs → project root
+const prds = fs.readdirSync(brandDir).filter(f => f.endsWith('_PRD.md') || f.endsWith('-prd.md'));
+for (const prdFile of prds) {
+  fs.copyFileSync(path.join(brandDir, prdFile), path.join(cwd, prdFile));
+  console.log(`  ✓ Installed ${prdFile}`);
+  installed++;
+}
+
+// 6. Schema → project root
+const schema = path.join(brandDir, 'schema.graphql');
+if (fs.existsSync(schema)) {
+  fs.copyFileSync(schema, path.join(cwd, 'schema.graphql'));
+  console.log('  ✓ Installed schema.graphql');
+  installed++;
+}
+
+// 7. Logo → src/assets/images/
+const logo = path.join(brandDir, 'engine_logo.png');
+if (fs.existsSync(logo)) {
+  const logoTarget = path.join(cwd, 'src/assets/images/engine_logo.png');
+  fs.mkdirSync(path.dirname(logoTarget), { recursive: true });
+  fs.copyFileSync(logo, logoTarget);
+  console.log('  ✓ Installed engine_logo.png');
+  installed++;
+}
+
+// 8. Write .brand marker so reset script knows which brand is active
+fs.writeFileSync(path.join(cwd, '.brand'), brandName + '\n', 'utf-8');
+
+console.log(`\n✅ "${brandName}" brand applied (${installed} files installed).`);
+console.log('   Run "npm run brand:reset" to revert to neutral theme.\n');

package/scripts/postinstall.mjs

@@ -335,6 +335,26 @@ if (fs.existsSync(packageJsonPath)) {
       scriptsAdded.push('validate:dashboard');
     }
 
+    // Add manual setup script (re-runs postinstall if it was missed)
+    if (!packageJson.scripts['setup']) {
+      packageJson.scripts['setup'] = 'node node_modules/@schandlergarcia/sf-web-components/scripts/postinstall.mjs';
+      scriptsAdded.push('setup');
+    }
+
+    // Add brand scripts
+    if (!packageJson.scripts['brand:engine']) {
+      packageJson.scripts['brand:engine'] = 'node node_modules/@schandlergarcia/sf-web-components/scripts/apply-brand.mjs engine';
+      scriptsAdded.push('brand:engine');
+    }
+    if (!packageJson.scripts['brand:reset']) {
+      packageJson.scripts['brand:reset'] = 'node node_modules/@schandlergarcia/sf-web-components/scripts/apply-brand.mjs --reset';
+      scriptsAdded.push('brand:reset');
+    }
+    if (!packageJson.scripts['brand:list']) {
+      packageJson.scripts['brand:list'] = 'node node_modules/@schandlergarcia/sf-web-components/scripts/apply-brand.mjs --list';
+      scriptsAdded.push('brand:list');
+    }
+
     if (scriptsAdded.length > 0) {
       fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n', 'utf-8');
       scriptsAdded.forEach(script => {
@@ -442,6 +462,7 @@ console.log(`  - Installed ${templatesInstalled} page templates`);
 console.log(`  - Installed ${scriptsInstalled} utility scripts`);
 console.log(`  - Installed CommandCenter.tsx for dashboard management`);
 console.log(`  - Added "npm run reset:command-center" script`);
+console.log(`  - Added "npm run setup" script (re-run this setup anytime)`);
 console.log(`  - Installed AI assistant rules (.a4drules)`);
 if (migratedFiles > 0) {
   console.log(`  - Migrated ${migratedFiles} dashboard files to correct location`);

package/scripts/reset-command-center.sh

@@ -398,24 +398,45 @@ echo "→ Cleaning caches…"
 rm -rf node_modules/.vite 2>/dev/null && echo "  ✓ Cleared Vite cache" || true
 echo ""
 
-# ── 9. Restore neutral global.css ────────────────────────────────────────────
+# ── 9. Restore global.css (brand-aware) ──────────────────────────────────────
 
 mkdir -p src/styles
 
 GLOBAL_CSS="src/styles/global.css"
 echo "→ Restoring ${GLOBAL_CSS}..."
 
-# Detect package location for global.css
+# Check if a brand is active
+ACTIVE_BRAND=""
+if [ -f ".brand" ]; then
+  ACTIVE_BRAND="$(cat .brand | tr -d '[:space:]')"
+fi
+
 PACKAGE_CSS=""
-if [ -f "node_modules/@schandlergarcia/sf-web-components/src/styles/global.css" ]; then
-  PACKAGE_CSS="node_modules/@schandlergarcia/sf-web-components/src/styles/global.css"
-elif [ -f "$SCRIPT_DIR/../src/styles/global.css" ]; then
-  PACKAGE_CSS="$SCRIPT_DIR/../src/styles/global.css"
+if [ -n "$ACTIVE_BRAND" ]; then
+  # Use the brand's global.css
+  if [ -f "node_modules/@schandlergarcia/sf-web-components/brands/$ACTIVE_BRAND/global.css" ]; then
+    PACKAGE_CSS="node_modules/@schandlergarcia/sf-web-components/brands/$ACTIVE_BRAND/global.css"
+  elif [ -f "$SCRIPT_DIR/../brands/$ACTIVE_BRAND/global.css" ]; then
+    PACKAGE_CSS="$SCRIPT_DIR/../brands/$ACTIVE_BRAND/global.css"
+  fi
+fi
+
+# Fall back to neutral if no brand or brand CSS not found
+if [ -z "$PACKAGE_CSS" ]; then
+  if [ -f "node_modules/@schandlergarcia/sf-web-components/src/styles/global.css" ]; then
+    PACKAGE_CSS="node_modules/@schandlergarcia/sf-web-components/src/styles/global.css"
+  elif [ -f "$SCRIPT_DIR/../src/styles/global.css" ]; then
+    PACKAGE_CSS="$SCRIPT_DIR/../src/styles/global.css"
+  fi
 fi
 
 if [ -n "$PACKAGE_CSS" ] && [ -f "$PACKAGE_CSS" ]; then
   cp "$PACKAGE_CSS" "$GLOBAL_CSS"
-  echo "  ✓ Theme restored from package"
+  if [ -n "$ACTIVE_BRAND" ]; then
+    echo "  ✓ Theme restored (brand: $ACTIVE_BRAND)"
+  else
+    echo "  ✓ Theme restored (neutral)"
+  fi
 else
   echo "  ⚠ Skipped global.css (package CSS not found)"
 fi