@schandlergarcia/sf-web-components 1.9.37 → 1.9.39

package/package.json

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

@@ -3,7 +3,11 @@
 /**
  * Post-install script for @schandlergarcia/sf-web-components
  *
- * Automatically copies sample data to the consuming project's src/data directory
+ * Automatically copies to the consuming project:
+ * - Component library source (src/components/library/)
+ * - Sample data (src/data/)
+ * - Skills (.a4drules/)
+ * - Scripts (scripts/)
  */
 
 import fs from 'fs';
@@ -20,97 +24,144 @@ const PACKAGE_ROOT = path.resolve(__dirname, '..');
 // 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');
+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 data copy');
+  console.log('  ℹ️  Running in development mode, skipping setup\n');
   process.exit(0);
 }
 
-// Find src/data directory in the consuming project
-const possiblePaths = [
-  path.join(PROJECT_ROOT, 'src/data'),
-  path.join(PROJECT_ROOT, 'force-app/main/default/webapplications/src/data'),
-];
-
-// Try to find an existing src directory
-let targetDir = null;
-for (const p of possiblePaths) {
-  const srcDir = path.dirname(p); // Get src directory
-  if (fs.existsSync(srcDir)) {
-    targetDir = p;
-    break;
+// Find webapp directory
+function findWebappDir() {
+  // Try direct src/
+  if (fs.existsSync(path.join(PROJECT_ROOT, 'src'))) {
+    return PROJECT_ROOT;
   }
-}
 
-// If no src directory found, look for any webapp with src/
-const webappPattern = /force-app\/main\/default\/webapplications\/[^/]+$/;
-if (!targetDir) {
-  try {
-    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 srcDir = path.join(webappRoot, webapp.name, 'src');
-          if (fs.existsSync(srcDir)) {
-            targetDir = path.join(srcDir, 'data');
-            break;
-          }
+  // 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;
         }
       }
     }
-  } catch (err) {
-    // Ignore errors
   }
+
+  return null;
 }
 
-if (!targetDir) {
-  console.log('  ⚠️  Could not find src/ directory in project');
-  console.log('  ℹ️  To manually copy sample data, run:');
-  console.log('');
-  console.log('      mkdir -p src/data');
-  console.log('      cp node_modules/@schandlergarcia/sf-web-components/data/engine-sample-data.js src/data/');
-  console.log('');
+const WEBAPP_DIR = findWebappDir();
+
+if (!WEBAPP_DIR) {
+  console.log('  ⚠️  Could not find webapp directory with src/');
+  console.log('  ℹ️  Skipping automated setup\n');
   process.exit(0);
 }
 
-// Create target directory if it doesn't exist
+let copiedCount = 0;
+
+// Helper: Copy 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);
+  }
+}
+
+// 1. Copy component library source
 try {
-  if (!fs.existsSync(targetDir)) {
-    fs.mkdirSync(targetDir, { recursive: true });
+  const targetComponentsDir = path.join(WEBAPP_DIR, 'src/components');
+  const sourceLibraryDir = path.join(PACKAGE_ROOT, 'src/components/library');
+
+  if (fs.existsSync(sourceLibraryDir)) {
+    const targetLibraryDir = path.join(targetComponentsDir, 'library');
+
+    if (!fs.existsSync(targetLibraryDir)) {
+      copyRecursive(sourceLibraryDir, targetLibraryDir);
+      console.log('  ✅ Component library → src/components/library/');
+      copiedCount++;
+    }
   }
 } catch (err) {
-  console.error('  ❌ Failed to create data directory:', err.message);
-  process.exit(0); // Don't fail the install
+  console.log('  ⚠️  Could not copy component library:', err.message);
 }
 
-// Copy sample data file
-const sourceFile = path.join(PACKAGE_ROOT, 'data/engine-sample-data.js');
-const targetFile = path.join(targetDir, 'engine-sample-data.js');
-
+// 2. Copy sample data
 try {
-  // Only copy if target doesn't exist (don't overwrite user's modifications)
+  const dataDir = path.join(WEBAPP_DIR, 'src/data');
+  if (!fs.existsSync(dataDir)) {
+    fs.mkdirSync(dataDir, { recursive: true });
+  }
+
+  const sourceFile = path.join(PACKAGE_ROOT, 'data/engine-sample-data.js');
+  const targetFile = path.join(dataDir, 'engine-sample-data.js');
+
   if (!fs.existsSync(targetFile)) {
     fs.copyFileSync(sourceFile, targetFile);
-    console.log('  ✅ Sample data copied to:', path.relative(PROJECT_ROOT, targetFile));
-    console.log('');
-    console.log('  Import in your components:');
-    console.log('');
-    console.log("    import { MAP_MARKERS, METRICS } from '@/data/engine-sample-data';");
-    console.log('');
-  } else {
-    console.log('  ℹ️  Sample data already exists (not overwriting)');
-    console.log('  📁', path.relative(PROJECT_ROOT, targetFile));
-    console.log('');
+    console.log('  ✅ Sample data → src/data/engine-sample-data.js');
+    copiedCount++;
   }
 } catch (err) {
-  console.error('  ⚠️  Could not copy sample data:', err.message);
-  console.log('  ℹ️  To manually copy, run:');
-  console.log('');
-  console.log('      cp node_modules/@schandlergarcia/sf-web-components/data/engine-sample-data.js src/data/');
-  console.log('');
+  console.log('  ⚠️  Could not copy sample data:', err.message);
+}
+
+// 3. 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)) {
+    copyRecursive(sourceRulesDir, targetRulesDir);
+    console.log('  ✅ Skills → .a4drules/');
+    copiedCount++;
+  }
+} catch (err) {
+  console.log('  ⚠️  Could not copy skills:', err.message);
+}
+
+// 4. Copy scripts
+try {
+  const scriptsDir = path.join(WEBAPP_DIR, 'scripts');
+  if (!fs.existsSync(scriptsDir)) {
+    fs.mkdirSync(scriptsDir, { 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);
+
+    if (fs.existsSync(sourceFile) && !fs.existsSync(targetFile)) {
+      fs.copyFileSync(sourceFile, targetFile);
+      fs.chmodSync(targetFile, 0o755); // Make executable
+      console.log(`  ✅ Script → scripts/${script}`);
+      copiedCount++;
+    }
+  }
+} 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');
 }
 
 process.exit(0);

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>
+  );
+}

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

@@ -0,0 +1,109 @@
+import React from "react";
+
+const VARIANT_CLASSES = {
+  default: "",
+  metric: "",
+  chart: "",
+  table: "",
+  widget: "",
+  status: ""
+};
+
+const SIZE_CLASSES = {
+  xs: "",
+  sm: "min-h-[80px]",
+  md: "min-h-[120px]",
+  lg: "min-h-[160px]",
+  xl: "min-h-[220px]",
+  full: ""
+};
+
+const PADDING_CLASSES = {
+  none: "p-0",
+  xs: "p-2",
+  sm: "p-3",
+  default: "p-4",
+  lg: "p-6",
+  xl: "p-8"
+};
+
+export default function BaseCard({
+  header,
+  body,
+  footer,
+  children,
+  variant = "default",
+  size = "md",
+  padding = "default",
+  shadow = true,
+  radius = "2xl",
+  border = true,
+  isHoverable = false,
+  isPressable = false,
+  isLoading = false,
+  isDisabled = false,
+  isSelected = false,
+  className = "",
+  headerClassName = "",
+  bodyClassName = "",
+  footerClassName = "",
+  onPress,
+  onHover,
+  ...rest
+}) {
+  const Comp = isPressable ? "button" : "div";
+
+  const radiusClass = radius ? `rounded-${radius}` : "rounded-2xl";
+  const paddingClass = PADDING_CLASSES[padding] ?? PADDING_CLASSES.default;
+  const sizeClass = SIZE_CLASSES[size] ?? SIZE_CLASSES.md;
+  const variantClass = VARIANT_CLASSES[variant] ?? VARIANT_CLASSES.default;
+
+  const interactive = isHoverable || isPressable;
+  const disabled = isDisabled || (isPressable && !onPress);
+
+  return (
+    <Comp
+      type={isPressable ? "button" : undefined}
+      onClick={isPressable ? onPress : undefined}
+      onMouseEnter={onHover}
+      disabled={isPressable ? disabled : undefined}
+      className={[
+        "w-full text-left",
+        radiusClass,
+        border ? "border border-slate-200 dark:border-slate-800" : "border border-transparent",
+        "bg-white dark:bg-slate-900",
+        shadow ? "shadow-sm" : "",
+        sizeClass,
+        variantClass,
+        interactive ? "transition hover:-translate-y-[1px] hover:shadow-md" : "",
+        isSelected ? "ring-2 ring-brand-500" : "",
+        disabled ? "opacity-60" : "",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    >
+      <div className={paddingClass}>
+        {header != null ? <div className={headerClassName}>{header}</div> : null}
+
+        {isLoading ? (
+          <div className={["mt-3 space-y-3", bodyClassName].filter(Boolean).join(" ")}>
+            <div className="h-4 w-1/3 animate-pulse rounded bg-slate-200 dark:bg-slate-800" />
+            <div className="h-4 w-2/3 animate-pulse rounded bg-slate-200 dark:bg-slate-800" />
+            <div className="h-4 w-1/2 animate-pulse rounded bg-slate-200 dark:bg-slate-800" />
+          </div>
+        ) : (
+          <>
+            {body != null ? <div className={bodyClassName}>{body}</div> : null}
+            {children}
+          </>
+        )}
+
+        {footer != null ? <div className={footerClassName}>{footer}</div> : null}
+      </div>
+    </Comp>
+  );
+}
+
+

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

@@ -0,0 +1,37 @@
+import React from "react";
+
+const TONE_CLASSES = {
+  neutral: "border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-800 dark:bg-slate-950/30 dark:text-slate-200",
+  success: "border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900/40 dark:bg-emerald-950/20 dark:text-emerald-200",
+  warning: "border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200",
+  danger: "border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-900/40 dark:bg-rose-950/20 dark:text-rose-200",
+  info: "border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-900/40 dark:bg-blue-950/20 dark:text-blue-200",
+};
+
+/**
+ * Highlighted callout box for important inline messages.
+ *
+ * @param {string}  title
+ * @param {string|ReactNode} message
+ * @param {"neutral"|"success"|"warning"|"danger"|"info"} tone
+ * @param {ReactNode} icon   Optional leading icon
+ */
+export default function CalloutCard({
+  title,
+  message,
+  tone = "neutral",
+  icon,
+  className = "",
+}) {
+  return (
+    <div className={`rounded-xl border p-4 ${TONE_CLASSES[tone] ?? TONE_CLASSES.neutral} ${className}`}>
+      <div className="flex gap-3">
+        {icon && <div className="mt-0.5 shrink-0">{icon}</div>}
+        <div>
+          {title && <div className="mb-1 text-sm font-semibold">{title}</div>}
+          <div className="text-sm">{message}</div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,105 @@
+import React from "react";
+import BaseCard from "./BaseCard";
+import UIText from "../ui/Text";
+import UIChip from "../ui/Chip";
+
+export default function ChartCard({
+  chart,
+  chartType,
+  title,
+  subtitle,
+  filters,
+  timeRange,
+  actions,
+  legend,
+  height = 280,
+  showGrid,
+  showAxes,
+  data,
+  loading = false,
+  error,
+  ...cardProps
+}) {
+  const header = (
+    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+      <div className="min-w-0">
+        {title ? (
+          <UIText as="div" size="sm" weight="medium">
+            {title}
+          </UIText>
+        ) : null}
+        {subtitle ? (
+          <UIText as="div" size="xs" muted className="mt-1">
+            {subtitle}
+          </UIText>
+        ) : null}
+      </div>
+      <div className="flex flex-wrap items-center justify-end gap-2">
+        {filters ? <div className="flex items-center gap-2">{filters}</div> : null}
+        {timeRange ? (
+          <select
+            className="h-9 rounded-lg border border-slate-200 bg-white px-3 text-sm text-slate-900 shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50"
+            value={timeRange.current}
+            onChange={(e) => timeRange.onChange?.(e.target.value)}
+            aria-label="Time range"
+          >
+            {timeRange.options?.map((opt) => (
+              <option key={opt.value ?? opt} value={opt.value ?? opt}>
+                {opt.label ?? opt}
+              </option>
+            ))}
+          </select>
+        ) : null}
+        {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
+      </div>
+    </div>
+  );
+
+  if (error) {
+    return (
+      <BaseCard
+        variant="chart"
+        header={header}
+        body={
+          <div className="mt-4 rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900 dark:border-rose-900/40 dark:bg-rose-950/30 dark:text-rose-100">
+            {String(error)}
+          </div>
+        }
+        {...cardProps}
+      />
+    );
+  }
+
+  const hint = chartType ? <UIChip>{chartType}</UIChip> : null;
+
+  return (
+    <BaseCard
+      variant="chart"
+      header={
+        <div className="flex items-center justify-between gap-3">
+          <div className="min-w-0">{header}</div>
+          {hint}
+        </div>
+      }
+      body={
+        <div className="mt-4">
+          <div className="w-full" style={{ height }}>
+            {chart}
+          </div>
+          {legend ? <div className="mt-3">{legend}</div> : null}
+          {(showGrid != null || showAxes != null) && data ? (
+            <div className="mt-2 text-xs text-slate-500 dark:text-slate-400">
+              grid: {String(!!showGrid)} · axes: {String(!!showAxes)} · points: {data.length}
+            </div>
+          ) : null}
+          {loading ? (
+            <div className="mt-3 text-xs text-slate-500 dark:text-slate-400">Loading…</div>
+          ) : null}
+        </div>
+      }
+      {...cardProps}
+    />
+  );
+}
+
+

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

@@ -0,0 +1,39 @@
+import React from "react";
+import UIText from "../ui/Text";
+
+export default function FeedPanel({
+  title,
+  subtitle,
+  actions,
+  children,
+  width,
+  className = "",
+  headerClassName = "",
+  bodyClassName = "",
+  ...rest
+}) {
+  const widthStyle = width ? (typeof width === "number" ? { width: `${width}px` } : { width }) : undefined;
+
+  return (
+    <div
+      className={`flex shrink-0 flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 ${className}`}
+      style={widthStyle}
+      {...rest}
+    >
+      {(title || subtitle || actions) && (
+        <div className={`shrink-0 border-b border-slate-100 px-4 py-3 dark:border-slate-800 ${headerClassName}`}>
+          <div className="flex items-start justify-between gap-3">
+            <div className="min-w-0">
+              {title && <UIText as="div" size="sm" weight="semibold">{title}</UIText>}
+              {subtitle && <UIText as="div" size="xs" muted className="mt-0.5">{subtitle}</UIText>}
+            </div>
+            {actions && <div className="shrink-0">{actions}</div>}
+          </div>
+        </div>
+      )}
+      <div className={`flex-1 overflow-y-auto ${bodyClassName}`}>
+        {children}
+      </div>
+    </div>
+  );
+}