@schandlergarcia/sf-web-components 1.9.28 → 1.9.30

package/scripts/postinstall.mjs

@@ -1,368 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Post-install script
- *
- * 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);
-
-// 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'));
-
-if (isPackageItself) {
-  console.log('Skipping postinstall - running in package directory');
-  process.exit(0);
-}
-
-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 });
-  }
-
-  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 count;
-}
-
-if (fs.existsSync(sourceLibraryDir)) {
-  componentsCopied = copyDirectoryRecursive(sourceLibraryDir, targetLibraryDir);
-  console.log(`  ✓ Copied ${componentsCopied} component files\n`);
-}
-
-// 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`);
-}
-
-// 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`);
-}
-
-// 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 workspaceTemplates = fs.readdirSync(workspaceTemplatesDir).filter(f => f.endsWith('.template'));
-  let workspaceTemplatesCopied = 0;
-
-  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`);
-  }
-}
-
-// 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;
-    }
-
-    if (modified) {
-      fs.writeFileSync(file, content, 'utf-8');
-      filesUpdated++;
-      console.log(`  ✓ ${path.relative(cwd, file)}`);
-    }
-  } catch (error) {
-    console.error(`  ✗ Error updating ${file}: ${error.message}`);
-  }
-}
-
-// 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 templates = fs.readdirSync(templatesDir).filter(f => f.endsWith('.template'));
-
-  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}`);
-    }
-  }
-}
-
-// 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
-  }
-}
-
-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/scripts/remove-local-components.mjs

@@ -1,78 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Remove Local Components Script
- *
- * Removes local shadcn/ui components and lib utilities after migrating to the component library.
- * This script should be run from the consuming project's webapp directory.
- *
- * Usage:
- *   node node_modules/@schandlergarcia/sf-web-components/scripts/remove-local-components.mjs
- *
- * Or add to package.json:
- *   "scripts": {
- *     "remove-local-ui": "node node_modules/@schandlergarcia/sf-web-components/scripts/remove-local-components.mjs"
- *   }
- */
-
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-// Get the webapp root (where this script is being called from)
-const webappRoot = process.cwd();
-
-console.log('🗑️  Remove Local Components');
-console.log('==========================\n');
-console.log(`Working directory: ${webappRoot}\n`);
-
-// Paths to remove
-const pathsToRemove = [
-  'src/components/ui',
-  'src/lib/utils.ts',
-  'src/lib/utils.js'
-];
-
-let removedCount = 0;
-const errors = [];
-
-for (const pathToRemove of pathsToRemove) {
-  const fullPath = path.join(webappRoot, pathToRemove);
-
-  if (!fs.existsSync(fullPath)) {
-    console.log(`  ⊘ ${pathToRemove} (does not exist)`);
-    continue;
-  }
-
-  try {
-    const stats = fs.statSync(fullPath);
-
-    if (stats.isDirectory()) {
-      fs.rmSync(fullPath, { recursive: true, force: true });
-      console.log(`  ✓ Removed directory: ${pathToRemove}`);
-    } else {
-      fs.unlinkSync(fullPath);
-      console.log(`  ✓ Removed file: ${pathToRemove}`);
-    }
-
-    removedCount++;
-  } catch (error) {
-    const errorMsg = `Failed to remove ${pathToRemove}: ${error.message}`;
-    errors.push(errorMsg);
-    console.error(`  ✗ ${errorMsg}`);
-  }
-}
-
-console.log(`\n📊 Summary: Removed ${removedCount} items`);
-
-if (errors.length > 0) {
-  console.error('\n❌ Errors:');
-  errors.forEach(e => console.error(`  - ${e}`));
-  process.exit(1);
-}
-
-console.log('\n✅ Local components removed successfully!');
-console.log('\nℹ️  Note: All imports should now use @schandlergarcia/sf-web-components');

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

@@ -1,42 +0,0 @@
-import UIButton from "../ui/UIButton";
-
-export interface Action {
-  label: string;
-  [key: string]: unknown;
-}
-
-export interface ActionListProps {
-  actions?: (Action | string)[];
-  title?: string;
-  onAction?: (action: Action | string) => void;
-  className?: string;
-}
-
-export default function ActionList({
-  actions = [],
-  title,
-  onAction,
-  className = "",
-}: ActionListProps) {
-  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.tsx

@@ -1,85 +0,0 @@
-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";
-
-type ActionStatus = "working" | "pending" | "complete" | "error";
-
-interface StatusIconConfig {
-  Icon: React.ComponentType<{ className?: string }>;
-  color: string;
-  spin: boolean;
-}
-
-const STATUS_ICON: Record<ActionStatus, StatusIconConfig> = {
-  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 },
-};
-
-export interface ActivityAction {
-  id: string;
-  status: ActionStatus;
-  title?: string;
-  action?: string;
-  subtitle?: string;
-  traveler?: string;
-  timestamp?: string;
-  startedAt?: string;
-}
-
-interface ActionItemProps {
-  action: ActivityAction;
-}
-
-function ActionItem({ action }: ActionItemProps) {
-  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 interface ActivityCardProps {
-  title?: string;
-  actions?: ActivityAction[];
-  className?: string;
-}
-
-export default function ActivityCard({ title = "Activity", actions = [], className = "" }: ActivityCardProps) {
-  if (actions.length === 0) return null;
-
-  return (
-    <div className={className}>
-      {title && (
-        <UIText as="div" size="xs" weight="medium" 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>
-  );
-}