@jmruthers/pace-core 0.5.184 → 0.5.186

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<

package/src/components/DatePickerWithTimezone/DatePickerWithTimezone.test.tsx

@@ -0,0 +1,314 @@
+/**
+ * @file DatePickerWithTimezone Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DatePickerWithTimezone/__tests__
+ * @since 0.1.0
+ *
+ * Comprehensive test suite for DatePickerWithTimezone component.
+ * Tests cover all major functionality, edge cases, and accessibility.
+ */
+
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { DatePickerWithTimezone } from './DatePickerWithTimezone';
+import { Calendar } from '../Calendar';
+
+// Mock timezone utilities
+vi.mock('../../utils/timezone', () => ({
+  getUserTimeZone: vi.fn(() => 'America/New_York')
+}));
+
+// Mock Calendar component
+vi.mock('../Calendar', () => ({
+  Calendar: vi.fn(({ selected, onSelect, ...props }) => (
+    <div data-testid="calendar" {...props}>
+      <button
+        data-testid="calendar-day"
+        onClick={() => onSelect?.(new Date('2024-01-15'))}
+      >
+        Day 15
+      </button>
+      {selected && <span data-testid="selected-date">{selected.toISOString()}</span>}
+    </div>
+  ))
+}));
+
+// Mock Button component
+vi.mock('../Button', () => ({
+  Button: vi.fn(({ children, onClick, ...props }) => (
+    <button data-testid="done-button" onClick={onClick} {...props}>
+      {children}
+    </button>
+  ))
+}));
+
+// Mock lucide-react Clock icon
+vi.mock('lucide-react', () => ({
+  Clock: ({ className, 'aria-hidden': ariaHidden, ...props }: any) => (
+    <svg
+      data-testid="clock-icon"
+      className={className}
+      aria-hidden={ariaHidden}
+      {...props}
+    >
+      <path d="M12 2v10l4 4" />
+    </svg>
+  )
+}));
+
+describe('DatePickerWithTimezone Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders with default props', () => {
+      const onSelect = vi.fn();
+      render(<DatePickerWithTimezone selected={undefined} onSelect={onSelect} />);
+
+      expect(screen.getByTestId('calendar')).toBeInTheDocument();
+      expect(screen.getByText(/Timezone:/)).toBeInTheDocument();
+    });
+
+    it('renders with selected date', () => {
+      const onSelect = vi.fn();
+      const selected = new Date('2024-01-15');
+      render(<DatePickerWithTimezone selected={selected} onSelect={onSelect} />);
+
+      expect(screen.getByTestId('selected-date')).toBeInTheDocument();
+    });
+
+    it('renders with custom timezone', () => {
+      const onSelect = vi.fn();
+      render(
+        <DatePickerWithTimezone
+          selected={undefined}
+          onSelect={onSelect}
+          timezone="America/Los_Angeles"
+        />
+      );
+
+      expect(screen.getByText('America/Los_Angeles')).toBeInTheDocument();
+    });
+
+    it('displays "Local" when timezone matches user timezone', () => {
+      const onSelect = vi.fn();
+      render(
+        <DatePickerWithTimezone
+          selected={undefined}
+          onSelect={onSelect}
+          timezone="America/New_York"
+        />
+      );
+
+      expect(screen.getByText('Local')).toBeInTheDocument();
+    });
+
+    it('renders with Done button when onDone is provided', () => {
+      const onSelect = vi.fn();
+      const onDone = vi.fn();
+      render(
+        <DatePickerWithTimezone selected={undefined} onSelect={onSelect} onDone={onDone} />
+      );
+
+      expect(screen.getByTestId('done-button')).toBeInTheDocument();
+      expect(screen.getByText('Done')).toBeInTheDocument();
+    });
+
+    it('does not render Done button when onDone is not provided', () => {
+      const onSelect = vi.fn();
+      render(<DatePickerWithTimezone selected={undefined} onSelect={onSelect} />);
+
+      expect(screen.queryByTestId('done-button')).not.toBeInTheDocument();
+    });
+
+    it('renders with custom className', () => {
+      const onSelect = vi.fn();
+      const { container } = render(
+        <DatePickerWithTimezone
+          selected={undefined}
+          onSelect={onSelect}
+          className="custom-class"
+        />
+      );
+
+      expect(container.firstChild).toHaveClass('custom-class');
+    });
+  });
+
+  describe('Date Selection', () => {
+    it('calls onSelect when date is selected', async () => {
+      const onSelect = vi.fn();
+      const user = userEvent.setup();
+
+      render(<DatePickerWithTimezone selected={undefined} onSelect={onSelect} />);
+
+      const dayButton = screen.getByTestId('calendar-day');
+      await user.click(dayButton);
+
+      expect(onSelect).toHaveBeenCalled();
+      expect(onSelect).toHaveBeenCalledWith(expect.any(Date));
+    });
+
+    it('handles date selection with existing selected date', async () => {
+      const onSelect = vi.fn();
+      const user = userEvent.setup();
+      const selected = new Date('2024-01-10');
+
+      render(<DatePickerWithTimezone selected={selected} onSelect={onSelect} />);
+
+      const dayButton = screen.getByTestId('calendar-day');
+      await user.click(dayButton);
+
+      expect(onSelect).toHaveBeenCalled();
+    });
+  });
+
+  describe('Done Button', () => {
+    it('calls onDone when Done button is clicked', async () => {
+      const onSelect = vi.fn();
+      const onDone = vi.fn();
+      const user = userEvent.setup();
+
+      render(
+        <DatePickerWithTimezone selected={undefined} onSelect={onSelect} onDone={onDone} />
+      );
+
+      const doneButton = screen.getByTestId('done-button');
+      await user.click(doneButton);
+
+      expect(onDone).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onSelect when Done button is clicked', async () => {
+      const onSelect = vi.fn();
+      const onDone = vi.fn();
+      const user = userEvent.setup();
+
+      render(
+        <DatePickerWithTimezone selected={undefined} onSelect={onSelect} onDone={onDone} />
+      );
+
+      const doneButton = screen.getByTestId('done-button');
+      await user.click(doneButton);
+
+      expect(onSelect).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Timezone Display', () => {
+    it('displays user timezone as "Local" when no timezone provided', () => {
+      const onSelect = vi.fn();
+      render(<DatePickerWithTimezone selected={undefined} onSelect={onSelect} />);
+
+      expect(screen.getByText('Local')).toBeInTheDocument();
+    });
+
+    it('displays timezone name when different from user timezone', () => {
+      const onSelect = vi.fn();
+      render(
+        <DatePickerWithTimezone
+          selected={undefined}
+          onSelect={onSelect}
+          timezone="Europe/London"
+        />
+      );
+
+      expect(screen.getByText('Europe/London')).toBeInTheDocument();
+    });
+
+    it('displays Clock icon', () => {
+      const onSelect = vi.fn();
+      render(
+        <DatePickerWithTimezone selected={undefined} onSelect={onSelect} />
+      );
+
+      expect(screen.getByTestId('clock-icon')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles undefined selected date', () => {
+      const onSelect = vi.fn();
+      render(<DatePickerWithTimezone selected={undefined} onSelect={onSelect} />);
+
+      expect(screen.getByTestId('calendar')).toBeInTheDocument();
+      expect(screen.queryByTestId('selected-date')).not.toBeInTheDocument();
+    });
+
+    it('handles null selected date', () => {
+      const onSelect = vi.fn();
+      // @ts-expect-error - Testing edge case
+      render(<DatePickerWithTimezone selected={null} onSelect={onSelect} />);
+
+      expect(screen.getByTestId('calendar')).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper ARIA labels for timezone', () => {
+      const onSelect = vi.fn();
+      render(
+        <DatePickerWithTimezone
+          selected={undefined}
+          onSelect={onSelect}
+          timezone="America/Los_Angeles"
+        />
+      );
+
+      const timezoneLabel = screen.getByLabelText('Timezone America/Los_Angeles');
+      expect(timezoneLabel).toBeInTheDocument();
+    });
+
+    it('marks Clock icon as decorative', () => {
+      const onSelect = vi.fn();
+      render(
+        <DatePickerWithTimezone selected={undefined} onSelect={onSelect} />
+      );
+
+      const clockIcon = screen.getByTestId('clock-icon');
+      expect(clockIcon).toBeInTheDocument();
+      expect(clockIcon).toHaveAttribute('aria-hidden', 'true');
+    });
+
+    it('supports keyboard navigation', async () => {
+      const onSelect = vi.fn();
+      const user = userEvent.setup();
+
+      render(<DatePickerWithTimezone selected={undefined} onSelect={onSelect} />);
+
+      const dayButton = screen.getByTestId('calendar-day');
+      await user.tab();
+
+      // Calendar should be keyboard accessible
+      expect(dayButton).toBeInTheDocument();
+    });
+  });
+
+  describe('Calendar Integration', () => {
+    it('passes correct props to Calendar component', () => {
+      const onSelect = vi.fn();
+      const selected = new Date('2024-01-15');
+      const MockedCalendar = vi.mocked(Calendar);
+
+      render(<DatePickerWithTimezone selected={selected} onSelect={onSelect} />);
+
+      expect(MockedCalendar).toHaveBeenCalledWith(
+        expect.objectContaining({
+          mode: 'single',
+          selected: selected,
+          onSelect: onSelect,
+          initialFocus: true,
+          captionLayout: 'dropdown-buttons',
+          fromYear: 1900,
+          toYear: 2100,
+          className: 'p-0'
+        }),
+        expect.anything()
+      );
+    });
+  });
+});
+