@jmruthers/pace-core 0.5.183 → 0.5.185

package/scripts/validate-master.js

@@ -0,0 +1,155 @@
+/**
+ * Master Validation Script
+ * Consolidated validation system for PACE Core package
+ * Now uses standardized test execution consistent with npm run test
+ */
+
+import { join } from 'path';
+import {
+  runCommand,
+  runStandardizedTests,
+} from './utils/command-runner.js';
+import { getPackageRoot, getRepoRoot } from './utils/path-helpers.js';
+import { isCI, getDefaultTimeout, getTestTimeout } from './utils/env.js';
+import { logger } from './utils/logger.js';
+
+const packageRoot = getPackageRoot(import.meta.url);
+const repoRoot = getRepoRoot(import.meta.url);
+const DEFAULT_TIMEOUT = getDefaultTimeout(30000, 120000);
+const TEST_TIMEOUT = getTestTimeout(300000, 300000);
+
+// Individual validation steps - only include scripts that actually exist
+const validationSteps = {
+  'type-check': {
+    name: 'Type Check',
+    command: ['npm', 'run', 'type-check']
+  },
+  'test': {
+    name: 'Test Suite',
+    customHandler: runStandardizedTestsWrapper,
+    skipInPrePublish: true
+  },
+  'build': {
+    name: 'Package Build',
+    command: ['npm', 'run', 'build'],
+    timeout: isCI() ? 180000 : 60000
+  },
+  'build:docs': {
+    name: 'Documentation Generation',
+    command: ['npm', 'run', 'build:docs'],
+    cwd: packageRoot,
+    timeout: isCI() ? 240000 : 120000
+  }
+};
+
+// Standardized test execution wrapper
+async function runStandardizedTestsWrapper() {
+  return runStandardizedTests(packageRoot, repoRoot, TEST_TIMEOUT);
+}
+
+// Main validation orchestrator
+async function runValidation(mode = 'standard') {
+  logger.header(`Running ${mode} validation`);
+  if (isCI()) {
+    logger.info('CI environment detected - using extended timeouts and live output');
+    logger.newline();
+  }
+  
+  const results = [];
+  const startTime = Date.now();
+  let criticalFailures = 0;
+  
+  for (const [stepKey, step] of Object.entries(validationSteps)) {
+    // Skip tests in pre-publish mode if configured to do so
+    if (mode === 'pre-publish' && step.skipInPrePublish) {
+      logger.skipped(`Skipping: ${step.name} (skipped in pre-publish mode)...`);
+      results.push({
+        step: stepKey,
+        name: step.name,
+        success: true,
+        duration: 0,
+        skipped: true
+      });
+      continue;
+    }
+    
+    const stepStartTime = Date.now();
+    logger.step(`Running: ${step.name}...`);
+    
+    const result = step.customHandler
+      ? await step.customHandler()
+      : await runCommand(step.command[0], step.command.slice(1), {
+          cwd: step.cwd || packageRoot,
+          timeout: step.timeout || DEFAULT_TIMEOUT,
+        });
+    
+    const stepDuration = Date.now() - stepStartTime;
+    const status = result.success ? '✅' : '❌';
+    
+    logger.info(`${status} ${step.name} - ${stepDuration}ms`);
+    logger.newline();
+    
+    results.push({
+      step: stepKey,
+      name: step.name,
+      success: result.success,
+      duration: stepDuration,
+      skipped: false
+    });
+    
+    if (!result.success) {
+      criticalFailures++;
+    }
+  }
+  
+  const totalDuration = Date.now() - startTime;
+  const passedSteps = results.filter(r => r.success).length;
+  const skippedSteps = results.filter(r => r.skipped).length;
+  
+  // Summary
+  logger.header('VALIDATION SUMMARY');
+  logger.info(`Total steps: ${results.length}`);
+  logger.info(`Passed: ${passedSteps}`);
+  logger.info(`Skipped: ${skippedSteps}`);
+  logger.info(`Failed: ${criticalFailures}`);
+  logger.info(`Total duration: ${totalDuration}ms`);
+  logger.newline();
+  
+  logger.info('Step Results:');
+  results.forEach(result => {
+    const status = result.skipped ? '⏭️' : (result.success ? '✅' : '❌');
+    const statusText = result.skipped ? 'skipped' : `${result.duration}ms`;
+    logger.info(`  ${status} ${result.step} - ${statusText}`);
+  });
+  
+  logger.newline();
+  logger.separator();
+  
+  if (criticalFailures === 0) {
+    logger.success('All validations passed!');
+    return true;
+  } else {
+    logger.error(`Validation failed! ${criticalFailures} validations failed`);
+    return false;
+  }
+}
+
+// CLI handling
+(async () => {
+  const mode = process.argv[2] || 'standard';
+  const success = await runValidation(mode);
+
+  if (!success) {
+    logger.newline();
+    logger.error('Package validation failed!');
+    logger.info('Please fix the issues above before publishing');
+    process.exit(1);
+  } else {
+    logger.newline();
+    logger.success('Package validation successful!');
+    process.exit(0);
+  }
+})().catch(error => {
+  logger.error(`Validation script error: ${error.message}`);
+  process.exit(1);
+});

package/scripts/validate-pre-publish.js

@@ -0,0 +1,140 @@
+#!/usr/bin/env node
+
+/**
+ * Pre-publish Validation Script
+ * Now uses standardized test execution consistent with npm run test
+ * Simplified to rely on vitest exit codes rather than output parsing
+ */
+
+import { join } from 'path';
+import { existsSync } from 'fs';
+import {
+  runCommand,
+  runStandardizedTests,
+} from './utils/command-runner.js';
+import { getPackageRoot, getRepoRoot } from './utils/path-helpers.js';
+import { getDefaultTimeout, getTestTimeout } from './utils/env.js';
+import { logger } from './utils/logger.js';
+
+const packageRoot = getPackageRoot(import.meta.url);
+const repoRoot = getRepoRoot(import.meta.url);
+const DEFAULT_TIMEOUT = getDefaultTimeout(30000, 120000);
+const TEST_TIMEOUT = getTestTimeout(300000, 300000);
+
+logger.header('Running pre-publish validation');
+
+// Check if typedoc and its plugins are installed
+function checkTypedocInstallation() {
+  const requiredPackages = [
+    'typedoc',
+    'typedoc-plugin-markdown',
+    'typedoc-plugin-merge-modules'
+  ];
+
+  logger.info('Checking TypeDoc installation...');
+  
+  // Check for specific packages
+  const missingPackages = requiredPackages.filter(pkg => {
+    const pkgPath = join(packageRoot, 'node_modules', pkg);
+    return !existsSync(pkgPath);
+  });
+
+  if (missingPackages.length > 0) {
+    logger.error(`Missing required packages: ${missingPackages.join(', ')}`);
+    logger.info(`Please run: npm install --save-dev ${missingPackages.join(' ')}`);
+    return false;
+  }
+
+  logger.success('TypeDoc installation verified');
+  return true;
+}
+
+// Main validation function
+async function runPrePublishValidation() {
+  logger.info('Running validation steps...');
+  logger.newline();
+
+  // Step 1: Type check
+  logger.step('Step 1: Type check');
+  const typeCheck = await runCommand('npm', ['run', 'type-check'], {
+    cwd: packageRoot,
+    timeout: DEFAULT_TIMEOUT,
+  });
+  if (!typeCheck.success) {
+    logger.error('Type check failed');
+    return false;
+  }
+
+  // Step 2: Build validation
+  logger.newline();
+  logger.step('Step 2: Build validation');
+  const build = await runCommand('npm', ['run', 'build'], {
+    cwd: packageRoot,
+    timeout: getDefaultTimeout(60000, 180000),
+  });
+  if (!build.success) {
+    logger.error('Build failed');
+    return false;
+  }
+
+  // Step 3: Test validation - now uses standardized test execution
+  logger.newline();
+  logger.step('Step 3: Test validation');
+  const tests = await runStandardizedTests(packageRoot, repoRoot, TEST_TIMEOUT);
+  if (!tests.success) {
+    logger.error('Tests failed');
+    return false;
+  }
+
+  // Step 4: Documentation generation
+  logger.newline();
+  logger.step('Step 4: Documentation generation');
+  if (!checkTypedocInstallation()) {
+    logger.error('TypeDoc validation failed');
+    return false;
+  }
+
+  const docs = await runCommand('npm', ['run', 'build:docs'], {
+    cwd: packageRoot,
+    timeout: getDefaultTimeout(120000, 240000),
+  });
+  if (!docs.success) {
+    logger.error('Documentation generation failed');
+    return false;
+  }
+
+  // Step 5: Format validation
+  logger.newline();
+  logger.step('Step 5: Format validation');
+  const format = await runCommand('npm', ['run', 'format:check'], {
+    cwd: packageRoot,
+    timeout: DEFAULT_TIMEOUT,
+  });
+  if (!format.success) {
+    logger.error('Format validation failed');
+    return false;
+  }
+
+  logger.newline();
+  logger.header('PRE-PUBLISH VALIDATION SUMMARY');
+  logger.success('All validation steps passed successfully!');
+  logger.success('Package meets publication requirements');
+  return true;
+}
+
+// Run the validation
+(async () => {
+  const success = await runPrePublishValidation();
+  if (!success) {
+    logger.newline();
+    logger.info('Required fixes:');
+    logger.info('- Fix validation failures');
+    logger.info('- Resolve build or type check errors');
+    process.exit(1);
+  } else {
+    process.exit(0);
+  }
+})().catch(error => {
+  logger.error(`Pre-publish validation error: ${error.message}`);
+  process.exit(1);
+});

package/scripts/validate-theme.js

@@ -0,0 +1,142 @@
+#!/usr/bin/env node
+
+/**
+ * Theme Validation Script
+ * 
+ * Validates that the Tailwind v4 theme file is properly structured
+ * and doesn't have common issues like circular references or missing colors.
+ */
+
+import { readFileSync } from 'fs';
+import { join } from 'path';
+import { getPackageRoot } from './utils/path-helpers.js';
+import { logger } from './utils/logger.js';
+
+const packageRoot = getPackageRoot(import.meta.url);
+const THEME_FILE = join(packageRoot, 'src/styles/core.css');
+
+// Required semantic colors for Tailwind v4
+const REQUIRED_SEMANTIC_COLORS = [
+  '--color-ring',
+  '--color-border',
+  '--color-input',
+  '--color-background',
+  '--color-foreground',
+  '--color-primary',
+  '--color-primary-foreground',
+  '--color-secondary',
+  '--color-secondary-foreground',
+  '--color-destructive',
+  '--color-destructive-foreground',
+  '--color-muted',
+  '--color-muted-foreground',
+  '--color-accent',
+  '--color-accent-foreground',
+  '--color-popover',
+  '--color-popover-foreground',
+  '--color-card',
+  '--color-card-foreground',
+  '--color-ring-offset'
+];
+
+// Component classes that should not have circular references
+const COMPONENT_CLASSES = [
+  '.pace-button',
+  '.pace-button-primary',
+  '.pace-button-secondary',
+  '.pace-button-outline',
+  '.pace-button-ghost',
+  '.pace-button-destructive',
+  '.pace-input',
+  '.pace-card',
+  '.pace-card-header',
+  '.pace-card-title',
+  '.pace-card-description',
+  '.pace-card-content',
+  '.pace-card-footer'
+];
+
+function validateThemeFile() {
+  logger.info('Validating Tailwind v4 theme file...');
+  logger.newline();
+
+  try {
+    const themeContent = readFileSync(THEME_FILE, 'utf8');
+    let errors = [];
+    let warnings = [];
+
+    // Check for required semantic colors
+    logger.success('Checking semantic colors...');
+    for (const color of REQUIRED_SEMANTIC_COLORS) {
+      if (!themeContent.includes(color)) {
+        errors.push(`Missing required semantic color: ${color}`);
+      }
+    }
+
+    // Check for circular @apply references
+    logger.success('Checking for circular @apply references...');
+    for (const className of COMPONENT_CLASSES) {
+      const classRegex = new RegExp(`${className}\\s*\\{[^}]*@apply[^}]*${className}[^}]*\\}`, 's');
+      if (classRegex.test(themeContent)) {
+        errors.push(`Circular @apply reference found in ${className}`);
+      }
+    }
+
+    // Check for undefined color references (skip if --color-*: initial is used)
+    logger.success('Checking for undefined color references...');
+    if (!themeContent.includes('--color-*: initial')) {
+      const colorRefs = themeContent.match(/--color-[a-zA-Z-]+/g) || [];
+      const definedColors = themeContent.match(/--color-[a-zA-Z-]+:/g) || [];
+      const definedColorNames = definedColors.map(c => c.replace(':', ''));
+      
+      for (const ref of colorRefs) {
+        if (!definedColorNames.includes(ref)) {
+          warnings.push(`Potentially undefined color reference: ${ref}`);
+        }
+      }
+    }
+
+    // Check for @theme declaration
+    logger.success('Checking for @theme declaration...');
+    if (!themeContent.includes('@theme {')) {
+      errors.push('Missing @theme declaration');
+    }
+
+    // Check for @import tailwindcss
+    logger.success('Checking for Tailwind import...');
+    if (!themeContent.includes('@import "tailwindcss"')) {
+      errors.push('Missing @import "tailwindcss"');
+    }
+
+    // Report results
+    logger.newline();
+    logger.header('Validation Results');
+    
+    if (errors.length === 0 && warnings.length === 0) {
+      logger.success('All checks passed! Theme file is valid.');
+      return true;
+    }
+
+    if (errors.length > 0) {
+      logger.newline();
+      logger.error('Errors found:');
+      errors.forEach(error => console.log(`  - ${error}`));
+    }
+
+    if (warnings.length > 0) {
+      logger.newline();
+      logger.warning('Warnings:');
+      warnings.forEach(warning => console.log(`  - ${warning}`));
+    }
+
+    return errors.length === 0;
+
+  } catch (error) {
+    logger.error(`Failed to read theme file: ${error.message}`);
+    return false;
+  }
+}
+
+// Run validation
+const isValid = validateThemeFile();
+process.exit(isValid ? 0 : 1);

package/src/components/Calendar/Calendar.tsx

@@ -63,7 +63,7 @@ import { cn } from '../../utils/core/cn';
 // CALENDAR COMPONENT
 // ============================================================================
 
-export interface CalendarProps extends Omit<DayPickerProps, 'className' | 'classNames' | 'styles'> {
+export interface CalendarProps extends Omit<DayPickerProps, 'className' | 'classNames' | 'styles' | 'onSelect'> {
   /**
    * Additional CSS classes to apply to the calendar wrapper
    */
@@ -72,6 +72,13 @@ export interface CalendarProps extends Omit<DayPickerProps, 'className' | 'class
    * Custom classNames for DayPicker sub-components
    */
   classNames?: DayPickerProps['classNames'];
+  /**
+   * Date selection handler. Signature depends on mode:
+   * - mode="single": (date: Date | undefined) => void
+   * - mode="range": (range: { from: Date; to?: Date } | undefined) => void
+   * - mode="multiple": (dates: Date[]) => void
+   */
+  onSelect?: ((date: Date | undefined) => void) | ((range: { from: Date; to?: Date } | undefined) => void) | ((dates: Date[]) => void);
 }
 
 /**

package/src/components/Card/Card.tsx

@@ -97,9 +97,10 @@ function getCardClasses(variant: CardProps['variant'] = 'default', size: CardPro
   return `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]}`;
 }
 
-const Card = React.forwardRef<
+// Internal component for cards with navigation (requires Router context)
+const CardWithNavigation = React.forwardRef<
   HTMLElement,
-  CardProps
+  CardProps & { link: string }
 >(({ className, variant, size, isLink, link, onClick, ...props }, ref) => {
   const navigate = useNavigate();
   
@@ -131,19 +132,57 @@ const Card = React.forwardRef<
         shouldShowLinkStyles && "cursor-pointer hover:bg-acc-200 hover:shadow-xl/30",
         className
       )}
-      onClick={link ? handleClick : onClick}
-      role={link ? "link" : undefined}
-      tabIndex={link ? 0 : undefined}
-      onKeyDown={link ? (e) => {
+      onClick={handleClick}
+      role="link"
+      tabIndex={0}
+      onKeyDown={(e) => {
         if (e.key === 'Enter' || e.key === ' ') {
           e.preventDefault();
           handleClick(e as unknown as React.MouseEvent<HTMLElement>);
         }
-      } : undefined}
+      }}
       {...props}
     />
   );
-})
+});
+CardWithNavigation.displayName = "CardWithNavigation";
+
+// Internal component for cards without navigation (no Router context required)
+const CardWithoutNavigation = React.forwardRef<
+  HTMLElement,
+  Omit<CardProps, 'link'>
+>(({ className, variant, size, isLink, onClick, ...props }, ref) => {
+  // Automatically enable link styles if isLink is true
+  const shouldShowLinkStyles = isLink;
+  
+  return (
+    <article
+      ref={ref}
+      className={cn(
+        "grid grid-rows-[auto_1fr_auto] min-w-0 overflow-visible",
+        getCardClasses(variant, size),
+        shouldShowLinkStyles && "cursor-pointer hover:bg-acc-200 hover:shadow-xl/30",
+        className
+      )}
+      onClick={onClick}
+      {...props}
+    />
+  );
+});
+CardWithoutNavigation.displayName = "CardWithoutNavigation";
+
+// Main Card component that conditionally renders the appropriate variant
+const Card = React.forwardRef<
+  HTMLElement,
+  CardProps
+>(({ link, ...props }, ref) => {
+  // Only use navigation component if link is provided
+  // This prevents useNavigate() from being called when Router context is not available
+  if (link) {
+    return <CardWithNavigation ref={ref} link={link} {...props} />;
+  }
+  return <CardWithoutNavigation ref={ref} {...props} />;
+});
 Card.displayName = "Card"
 
 const CardHeader = React.forwardRef<