@schandlergarcia/sf-web-components 1.9.38 → 1.9.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.9.38",
+  "version": "1.9.40",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",
@@ -28,6 +28,9 @@
     "dist",
     "scripts",
     "data",
+    "src/components",
+    "src/lib",
+    "src/types",
     "README.md",
     ".a4drules"
   ],

package/scripts/postinstall.mjs

@@ -1,148 +1,368 @@
 #!/usr/bin/env node
 
 /**
- * Post-install script for @schandlergarcia/sf-web-components
+ * Post-install script
  *
- * Automatically copies to the consuming project:
- * - Sample data (src/data/)
- * - Skills (.a4drules/)
- * - Scripts (scripts/)
+ * Automatically runs after installing @schandlergarcia/sf-web-components
+ * Copies UI components into the consuming project so Tailwind can properly scan them
  */
 
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
+import { glob } from 'glob';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-// Get the package root (one level up from scripts/)
-const PACKAGE_ROOT = path.resolve(__dirname, '..');
+// Only run if we're in a consuming project (not the package itself)
+const cwd = process.cwd();
+const isPackageItself = cwd.includes('sf-web-components') && fs.existsSync(path.join(cwd, 'scripts/postinstall.mjs'));
 
-// Get the project root (where the consuming project installed this package)
-// Go up from node_modules/@schandlergarcia/sf-web-components
-const PROJECT_ROOT = path.resolve(PACKAGE_ROOT, '../../..');
-
-console.log('\n📦 @schandlergarcia/sf-web-components post-install\n');
-
-// Check if we're in a node_modules context (not during package development)
-if (!PACKAGE_ROOT.includes('node_modules')) {
-  console.log('  ℹ️  Running in development mode, skipping setup\n');
+if (isPackageItself) {
+  console.log('Skipping postinstall - running in package directory');
   process.exit(0);
 }
 
-// Find webapp directory
-function findWebappDir() {
-  // Try direct src/
-  if (fs.existsSync(path.join(PROJECT_ROOT, 'src'))) {
-    return PROJECT_ROOT;
+console.log('🔄 Running @schandlergarcia/sf-web-components setup...\n');
+
+const PACKAGE_NAME = '@schandlergarcia/sf-web-components';
+let filesUpdated = 0;
+let componentsCopied = 0;
+
+// Copy entire library directory
+const packageRoot = path.join(cwd, 'node_modules', PACKAGE_NAME);
+const sourceLibraryDir = path.join(packageRoot, 'src/components/library');
+const targetLibraryDir = path.join(cwd, 'src/components/library');
+
+console.log('📦 Copying component library...\n');
+
+function copyDirectoryRecursive(source, target) {
+  if (!fs.existsSync(source)) return 0;
+
+  let count = 0;
+
+  if (!fs.existsSync(target)) {
+    fs.mkdirSync(target, { recursive: true });
   }
 
-  // Try force-app structure
-  const webappRoot = path.join(PROJECT_ROOT, 'force-app/main/default/webapplications');
-  if (fs.existsSync(webappRoot)) {
-    const webapps = fs.readdirSync(webappRoot, { withFileTypes: true });
-    for (const webapp of webapps) {
-      if (webapp.isDirectory()) {
-        const webappDir = path.join(webappRoot, webapp.name);
-        if (fs.existsSync(path.join(webappDir, 'src'))) {
-          return webappDir;
-        }
+  const items = fs.readdirSync(source);
+
+  for (const item of items) {
+    // Skip hidden directories and files (like .sfdx, .git, etc.)
+    if (item.startsWith('.')) {
+      continue;
+    }
+
+    const sourcePath = path.join(source, item);
+    const targetPath = path.join(target, item);
+    const stat = fs.statSync(sourcePath);
+
+    if (stat.isDirectory()) {
+      count += copyDirectoryRecursive(sourcePath, targetPath);
+    } else if (item.match(/\.(jsx|tsx|js|ts|css|md)$/)) {
+      try {
+        fs.copyFileSync(sourcePath, targetPath);
+        count++;
+      } catch (error) {
+        console.error(`  ✗ Failed to copy ${item}: ${error.message}`);
       }
     }
   }
 
-  return null;
+  return count;
 }
 
-const WEBAPP_DIR = findWebappDir();
+if (fs.existsSync(sourceLibraryDir)) {
+  componentsCopied = copyDirectoryRecursive(sourceLibraryDir, targetLibraryDir);
+  console.log(`  ✓ Copied ${componentsCopied} component files\n`);
+}
 
-if (!WEBAPP_DIR) {
-  console.log('  ⚠️  Could not find webapp directory with src/');
-  console.log('  ℹ️  Skipping automated setup\n');
-  process.exit(0);
+// Also copy lib directory (utils, etc.)
+const sourceLibDir = path.join(packageRoot, 'src/lib');
+const targetLibDir = path.join(cwd, 'src/lib');
+
+if (fs.existsSync(sourceLibDir)) {
+  const libFilesCopied = copyDirectoryRecursive(sourceLibDir, targetLibDir);
+  console.log(`  ✓ Copied ${libFilesCopied} lib files\n`);
 }
 
-let copiedCount = 0;
+// Copy types directory
+const sourceTypesDir = path.join(packageRoot, 'src/types');
+const targetTypesDir = path.join(cwd, 'src/types');
+
+if (fs.existsSync(sourceTypesDir)) {
+  const typesFilesCopied = copyDirectoryRecursive(sourceTypesDir, targetTypesDir);
+  console.log(`  ✓ Copied ${typesFilesCopied} type files\n`);
+}
+
+// Copy workspace directory (ComponentRegistry, etc.)
+const sourceWorkspaceDir = path.join(packageRoot, 'src/components/workspace');
+const targetWorkspaceDir = path.join(cwd, 'src/components/workspace');
+
+if (fs.existsSync(sourceWorkspaceDir)) {
+  const workspaceFilesCopied = copyDirectoryRecursive(sourceWorkspaceDir, targetWorkspaceDir);
+  console.log(`  ✓ Copied ${workspaceFilesCopied} workspace files\n`);
+}
 
-// 1. Copy sample data
-try {
-  const dataDir = path.join(WEBAPP_DIR, 'src/data');
-  if (!fs.existsSync(dataDir)) {
-    fs.mkdirSync(dataDir, { recursive: true });
+// Copy workspace templates (CommandCenter, etc.)
+const workspaceTemplatesDir = path.join(packageRoot, 'src/templates/workspace');
+if (fs.existsSync(workspaceTemplatesDir)) {
+  if (!fs.existsSync(targetWorkspaceDir)) {
+    fs.mkdirSync(targetWorkspaceDir, { recursive: true });
   }
 
-  const sourceFile = path.join(PACKAGE_ROOT, 'data/engine-sample-data.js');
-  const targetFile = path.join(dataDir, 'engine-sample-data.js');
+  const workspaceTemplates = fs.readdirSync(workspaceTemplatesDir).filter(f => f.endsWith('.template'));
+  let workspaceTemplatesCopied = 0;
 
-  if (!fs.existsSync(targetFile)) {
-    fs.copyFileSync(sourceFile, targetFile);
-    console.log('  ✅ Sample data → src/data/engine-sample-data.js');
-    copiedCount++;
+  for (const template of workspaceTemplates) {
+    const sourcePath = path.join(workspaceTemplatesDir, template);
+    const targetFileName = template.replace('.template', '');
+    const targetPath = path.join(targetWorkspaceDir, targetFileName);
+
+    try {
+      const content = fs.readFileSync(sourcePath, 'utf-8');
+      fs.writeFileSync(targetPath, content, 'utf-8');
+      workspaceTemplatesCopied++;
+    } catch (error) {
+      console.error(`  ✗ Failed to copy ${targetFileName}: ${error.message}`);
+    }
+  }
+
+  if (workspaceTemplatesCopied > 0) {
+    console.log(`  ✓ Copied ${workspaceTemplatesCopied} workspace template files\n`);
   }
-} catch (err) {
-  console.log('  ⚠️  Could not copy sample data:', err.message);
 }
 
-// 2. Copy .a4drules (skills)
-try {
-  const targetRulesDir = path.join(WEBAPP_DIR, '.a4drules');
-  const sourceRulesDir = path.join(PACKAGE_ROOT, '.a4drules');
-
-  if (!fs.existsSync(targetRulesDir) && fs.existsSync(sourceRulesDir)) {
-    // Copy entire .a4drules directory recursively
-    function copyRecursive(src, dest) {
-      if (fs.statSync(src).isDirectory()) {
-        if (!fs.existsSync(dest)) {
-          fs.mkdirSync(dest, { recursive: true });
-        }
-        fs.readdirSync(src).forEach(file => {
-          copyRecursive(path.join(src, file), path.join(dest, file));
-        });
-      } else {
-        fs.copyFileSync(src, dest);
-      }
+// Copy pages directory (sample pages, etc.)
+const sourcePagesDir = path.join(packageRoot, 'src/components/pages');
+const targetComponentPagesDir = path.join(cwd, 'src/components/pages');
+
+if (fs.existsSync(sourcePagesDir)) {
+  const pagesFilesCopied = copyDirectoryRecursive(sourcePagesDir, targetComponentPagesDir);
+  console.log(`  ✓ Copied ${pagesFilesCopied} component pages\n`);
+}
+
+// Update imports in existing files to use local library
+const files = glob.sync('src/**/*.{ts,tsx,js,jsx}', {
+  cwd,
+  absolute: true,
+  ignore: ['**/node_modules/**', '**/dist/**', '**/components/library/**']
+});
+
+console.log(`\n🔄 Updating imports in ${files.length} files...\n`);
+
+for (const file of files) {
+  try {
+    let content = fs.readFileSync(file, 'utf-8');
+    let modified = false;
+
+    // Replace package imports with local library imports
+    // Match: import { UIButton, Card, MetricCard } from '@schandlergarcia/sf-web-components';
+    // Replace: import { UIButton, Card, MetricCard } from '@/components/library';
+    const packageImportRegex = new RegExp(
+      `from\\s+['"]${PACKAGE_NAME}['"]`,
+      'g'
+    );
+
+    if (packageImportRegex.test(content)) {
+      content = content.replace(packageImportRegex, `from '@/components/library'`);
+      modified = true;
+    }
+
+    // Also replace specific subpath imports
+    const subpathRegex = new RegExp(
+      `from\\s+['"]${PACKAGE_NAME}/lib['"]`,
+      'g'
+    );
+
+    if (subpathRegex.test(content)) {
+      content = content.replace(subpathRegex, `from '@/lib'`);
+      modified = true;
     }
 
-    copyRecursive(sourceRulesDir, targetRulesDir);
-    console.log('  ✅ Skills → .a4drules/');
-    copiedCount++;
+    if (modified) {
+      fs.writeFileSync(file, content, 'utf-8');
+      filesUpdated++;
+      console.log(`  ✓ ${path.relative(cwd, file)}`);
+    }
+  } catch (error) {
+    console.error(`  ✗ Error updating ${file}: ${error.message}`);
   }
-} catch (err) {
-  console.log('  ⚠️  Could not copy skills:', err.message);
 }
 
-// 3. Copy scripts
-try {
-  const scriptsDir = path.join(WEBAPP_DIR, 'scripts');
-  if (!fs.existsSync(scriptsDir)) {
-    fs.mkdirSync(scriptsDir, { recursive: true });
+// Copy page templates
+const templatesDir = path.join(path.dirname(__dirname), 'src/templates/pages');
+const targetPagesDir = path.join(cwd, 'src/pages');
+
+console.log('\n📄 Installing page templates...\n');
+
+let templatesInstalled = 0;
+const installedTemplates = [];
+
+if (fs.existsSync(templatesDir)) {
+  // Create target pages directory if it doesn't exist
+  if (!fs.existsSync(targetPagesDir)) {
+    fs.mkdirSync(targetPagesDir, { recursive: true });
   }
 
-  const scriptsToCopy = ['reset-command-center.sh', 'validate-dashboard.sh'];
-  for (const script of scriptsToCopy) {
-    const sourceFile = path.join(PACKAGE_ROOT, 'scripts', script);
-    const targetFile = path.join(scriptsDir, script);
+  const templates = fs.readdirSync(templatesDir).filter(f => f.endsWith('.template'));
 
-    if (fs.existsSync(sourceFile) && !fs.existsSync(targetFile)) {
-      fs.copyFileSync(sourceFile, targetFile);
-      fs.chmodSync(targetFile, 0o755); // Make executable
-      console.log(`  ✅ Script → scripts/${script}`);
-      copiedCount++;
+  for (const template of templates) {
+    const sourcePath = path.join(templatesDir, template);
+    const targetFileName = template.replace('.template', '');
+    const targetPath = path.join(targetPagesDir, targetFileName);
+    const pageName = targetFileName.replace('.tsx', '');
+
+    // Always overwrite to ensure latest templates
+    try {
+      const content = fs.readFileSync(sourcePath, 'utf-8');
+      fs.writeFileSync(targetPath, content, 'utf-8');
+      console.log(`  ✓ Installed ${targetFileName}`);
+      templatesInstalled++;
+      installedTemplates.push(pageName);
+    } catch (error) {
+      console.error(`  ✗ Failed to install ${targetFileName}: ${error.message}`);
     }
   }
-} catch (err) {
-  console.log('  ⚠️  Could not copy scripts:', err.message);
 }
 
-// Summary
-if (copiedCount > 0) {
-  console.log(`\n  🎉 Setup complete! ${copiedCount} items copied\n`);
-  console.log('  Next steps:\n');
-  console.log('    npm run reset:command-center  # Reset to baseline state');
-  console.log('    npm run dev                    # Start dev server\n');
-} else {
-  console.log('  ℹ️  All files already exist (not overwriting)\n');
+// 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');
+
+if (fs.existsSync(routesTemplatePath) && fs.existsSync(path.join(cwd, 'src'))) {
+  console.log('\n🔄 Installing routes configuration...\n');
+
+  try {
+    const routesContent = fs.readFileSync(routesTemplatePath, 'utf-8');
+    fs.writeFileSync(routesPath, routesContent, 'utf-8');
+    console.log('  ✓ Installed complete routes.tsx with Account search and detail pages');
+  } catch (error) {
+    console.error(`  ✗ Failed to install routes.tsx: ${error.message}`);
+  }
+}
+
+// Add reset:command-center script to package.json
+const packageJsonPath = path.join(cwd, 'package.json');
+if (fs.existsSync(packageJsonPath)) {
+  console.log('\n🔧 Adding reset script to package.json...\n');
+
+  try {
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+
+    if (!packageJson.scripts) {
+      packageJson.scripts = {};
+    }
+
+    // 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');
+      scriptsAdded.forEach(script => {
+        console.log(`  ✓ Added "${script}" script to package.json`);
+      });
+    } else {
+      console.log('  ℹ Scripts already exist');
+    }
+  } catch (error) {
+    console.error(`  ✗ Failed to update package.json: ${error.message}`);
+  }
+}
+
+// Copy .a4drules from package to project root (so AI assistants can discover them)
+const packageA4dRules = path.join(packageRoot, '.a4drules');
+const projectRootA4dRules = path.join(cwd, '../../../../../.a4drules'); // Go up from webapp to project root
+
+if (fs.existsSync(packageA4dRules)) {
+  console.log('\n📋 Copying AI assistant rules to project root...\n');
+
+  // Resolve to absolute path
+  const projectRootPath = path.resolve(cwd, '../../../../../');
+  const targetA4dRules = path.join(projectRootPath, '.a4drules');
+
+  // Create .a4drules if it doesn't exist
+  if (!fs.existsSync(targetA4dRules)) {
+    fs.mkdirSync(targetA4dRules, { recursive: true });
+  }
+
+  // Copy skills directory
+  const skillsSource = path.join(packageA4dRules, 'skills');
+  const skillsTarget = path.join(targetA4dRules, 'skills');
+  if (fs.existsSync(skillsSource)) {
+    const skillsCopied = copyDirectoryRecursive(skillsSource, skillsTarget);
+    console.log(`  ✓ Copied ${skillsCopied} skill files`);
+  }
+
+  // Copy features directory
+  const featuresSource = path.join(packageA4dRules, 'features');
+  const featuresTarget = path.join(targetA4dRules, 'features');
+  if (fs.existsSync(featuresSource)) {
+    const featuresCopied = copyDirectoryRecursive(featuresSource, featuresTarget);
+    console.log(`  ✓ Copied ${featuresCopied} feature rule files`);
+  }
+}
+
+// Migrate any dashboards from old location (src/components/pages/) to new location (src/pages/)
+const oldPagesDir = path.join(cwd, 'src/components/pages');
+const newPagesDir = path.join(cwd, 'src/pages');
+let migratedFiles = 0;
+
+if (fs.existsSync(oldPagesDir)) {
+  console.log('\n🔄 Migrating dashboards from old location...\n');
+
+  const oldFiles = fs.readdirSync(oldPagesDir).filter(f =>
+    (f.endsWith('.jsx') || f.endsWith('.tsx')) &&
+    f.includes('Dashboard') &&
+    f !== 'BlankDashboard.jsx' &&
+    f !== 'BlankDashboard.tsx'
+  );
+
+  for (const file of oldFiles) {
+    const oldPath = path.join(oldPagesDir, file);
+    const newFile = file.replace('.jsx', '.tsx'); // Also convert .jsx to .tsx
+    const newPath = path.join(newPagesDir, newFile);
+
+    try {
+      fs.renameSync(oldPath, newPath);
+      console.log(`  ✓ Migrated ${file} → src/pages/${newFile}`);
+      migratedFiles++;
+    } catch (error) {
+      console.error(`  ✗ Failed to migrate ${file}: ${error.message}`);
+    }
+  }
+
+  // Try to remove old directory if empty
+  try {
+    const remaining = fs.readdirSync(oldPagesDir);
+    if (remaining.length === 0) {
+      fs.rmdirSync(oldPagesDir);
+      console.log('  ✓ Removed empty src/components/pages directory');
+    }
+  } catch {
+    // Ignore errors
+  }
 }
 
-process.exit(0);
+console.log('\n📊 Summary:');
+console.log(`  - Copied ${componentsCopied} UI components`);
+console.log(`  - Updated ${filesUpdated} files`);
+console.log(`  - Installed ${templatesInstalled} page templates`);
+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`);
+if (migratedFiles > 0) {
+  console.log(`  - Migrated ${migratedFiles} dashboard files to correct location`);
+}
+console.log('\n✅ Setup complete! UI components are now local for optimal Tailwind scanning\n');

package/src/components/library/cards/ActionList.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import UIButton from "../ui/Button";
+
+/**
+ * Row of action buttons — typically used at the bottom of a dashboard section.
+ *
+ * @param {{ label: string, [key]: any }[] | string[]} actions
+ * @param {string}     title
+ * @param {Function}   onAction  Called with the action object/string when clicked
+ */
+export default function ActionList({
+  actions = [],
+  title,
+  onAction,
+  className = "",
+}) {
+  return (
+    <div className={`rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900 ${className}`}>
+      {title && (
+        <div className="mb-3 text-sm font-medium text-slate-900 dark:text-slate-50">
+          {title}
+        </div>
+      )}
+      <div className="flex flex-wrap gap-2">
+        {actions.map((action, i) => (
+          <UIButton
+            key={i}
+            size="sm"
+            variant={i === 0 ? "primary" : "outline"}
+            onClick={() => onAction?.(action)}
+          >
+            {typeof action === "string" ? action : action.label}
+          </UIButton>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/library/cards/ActivityCard.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { ArrowPathIcon, CheckCircleIcon, ExclamationCircleIcon, ClockIcon } from "@heroicons/react/24/outline";
+import UIText from "../ui/Text";
+
+const STATUS_ICON = {
+  working:  { Icon: ArrowPathIcon,        color: "text-indigo-500",  spin: true },
+  pending:  { Icon: ClockIcon,            color: "text-slate-400",   spin: false },
+  complete: { Icon: CheckCircleIcon,      color: "text-emerald-500", spin: false },
+  error:    { Icon: ExclamationCircleIcon, color: "text-red-500",     spin: false },
+};
+
+function ActionItem({ action }) {
+  const s = STATUS_ICON[action.status] ?? STATUS_ICON.pending;
+  return (
+    <motion.div
+      initial={{ y: 12, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      exit={{ y: -12, opacity: 0 }}
+      className="rounded-lg border border-slate-100 bg-slate-50 p-3 dark:border-slate-800 dark:bg-slate-950/40"
+    >
+      <div className="flex items-start gap-2">
+        <s.Icon className={`mt-0.5 h-4 w-4 shrink-0 ${s.color} ${s.spin ? "animate-spin" : ""}`} />
+        <div className="min-w-0">
+          <div className="text-xs font-medium text-slate-700 dark:text-slate-200">{action.title ?? action.action}</div>
+          {(action.subtitle ?? action.traveler ?? action.timestamp ?? action.startedAt) && (
+            <div className="mt-0.5 text-[10px] text-slate-400">
+              {[action.subtitle, action.traveler, action.timestamp ?? action.startedAt].filter(Boolean).join(" · ")}
+            </div>
+          )}
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+export default function ActivityCard({ title = "Activity", actions = [], className = "" }) {
+  if (actions.length === 0) return null;
+
+  return (
+    <div className={className}>
+      {title && (
+        <UIText as="div" size="xs" weight="semibold" muted className="mb-2 uppercase tracking-wider">
+          {title}
+        </UIText>
+      )}
+      <div className="space-y-2">
+        <AnimatePresence>
+          {actions.map(a => (
+            <ActionItem key={a.id} action={a} />
+          ))}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}