@jmruthers/pace-core 0.5.193 → 0.6.2

package/scripts/validate-pre-publish.js

@@ -51,75 +51,80 @@ function checkTypedocInstallation() {
 
 // 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;
-  }
+  try {
+    logger.info('Running validation steps...');
+    logger.newline();
 
-  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 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;
+    }
 
-  // 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');
+    logger.newline();
+    logger.header('PRE-PUBLISH VALIDATION SUMMARY');
+    logger.success('All validation steps passed successfully!');
+    logger.success('Package meets publication requirements');
+    return true;
+  } catch (error) {
+    logger.error(`Pre-publish validation error: ${error.message}`);
     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

package/src/__tests__/helpers/test-providers.tsx

@@ -246,7 +246,7 @@ interface CustomRenderOptions extends Omit<RenderOptions, 'wrapper'> {
 }
 
 export function renderWithProviders(
-  ui: React.ReactElement,
+  ui: React.ReactElement<any>,
   options: CustomRenderOptions = {}
 ) {
   const {

package/src/__tests__/helpers/test-utils.tsx

@@ -48,7 +48,7 @@ interface CustomRenderOptions extends Omit<RenderOptions, 'wrapper'> {
 }
 
 export function renderWithProviders(
-  ui: ReactElement,
+  ui: ReactElement<any>,
   options: CustomRenderOptions = {}
 ): ReturnType<typeof render> {
   const {

package/src/__tests__/hooks/usePermissions.test.ts

@@ -143,7 +143,7 @@ describe('usePermissions Hook Stability', () => {
       mockIsPermittedCached.mockResolvedValue(true);
 
       const { result, rerender } = renderHook(() => 
-        useCan(mockUserId, mockScope, 'read:users', 'page-123', true)
+        useCan(mockUserId, mockScope, 'read:users', 'page-123', true, false)
       );
 
       // Wait for initial load
@@ -171,7 +171,7 @@ describe('usePermissions Hook Stability', () => {
         .mockResolvedValueOnce(true);
 
       const { result, rerender } = renderHook(() => 
-        useCan(mockUserId, mockScope, 'read:users', 'page-123', true)
+        useCan(mockUserId, mockScope, 'read:users', 'page-123', true, false)
       );
 
       // Wait for initial load

package/src/components/Alert/Alert.test.tsx

@@ -80,7 +80,7 @@ describe('Alert Component', () => {
     it('renders with children content', () => {
       renderWithProviders(
         <Alert>
-          <div data-testid="custom-content">Custom content</div>
+          <span data-testid="custom-content">Custom content</span>
         </Alert>
       );
       
@@ -330,14 +330,10 @@ describe('Alert Component', () => {
     it('works with icons and actions', () => {
       renderWithProviders(
         <Alert>
-          <div className="flex items-center gap-2">
-            <span>⚠️</span>
-            <div>
-              <AlertTitle>Warning</AlertTitle>
-              <AlertDescription>Please check your input</AlertDescription>
-            </div>
-            <button>Dismiss</button>
-          </div>
+          <span>⚠️</span>
+          <AlertTitle>Warning</AlertTitle>
+          <AlertDescription>Please check your input</AlertDescription>
+          <button>Dismiss</button>
         </Alert>
       );
       
@@ -484,7 +480,7 @@ describe('Alert Component', () => {
 
     it('works with multiple alerts', () => {
       renderWithProviders(
-        <div>
+        <>
           <Alert variant="default">
             <AlertTitle>Info</AlertTitle>
             <AlertDescription>Information message</AlertDescription>
@@ -493,7 +489,7 @@ describe('Alert Component', () => {
             <AlertTitle>Error</AlertTitle>
             <AlertDescription>Error message</AlertDescription>
           </Alert>
-        </div>
+        </>
       );
       
       const alerts = screen.getAllByRole('alert');
@@ -509,13 +505,11 @@ describe('Alert Component', () => {
         <Alert>
           <AlertTitle>Complex Alert</AlertTitle>
           <AlertDescription>
-            <div>
-              <p>This is a complex description with</p>
-              <ul>
-                <li>Multiple elements</li>
-                <li>Nested content</li>
-              </ul>
-            </div>
+            This is a complex description with
+            <ul>
+              <li>Multiple elements</li>
+              <li>Nested content</li>
+            </ul>
           </AlertDescription>
         </Alert>
       );

package/src/components/Alert/Alert.tsx

@@ -18,22 +18,20 @@
  *
  * @example
  * ```tsx
- * // Basic alert
+ * // Basic alert (renders as <aside> with <h5> title and <p> description)
  * <Alert>
  *   <AlertTitle>Success</AlertTitle>
  *   <AlertDescription>Your changes have been saved.</AlertDescription>
  * </Alert>
  *
- * // Destructive alert with icon
+ * // Destructive alert with icon (renders as <aside> with <h5> title and <p> description)
  * <Alert variant="destructive">
  *   <ErrorIcon />
- *   <div>
- *     <AlertTitle>Error</AlertTitle>
- *     <AlertDescription>Something went wrong.</AlertDescription>
- *   </div>
+ *   <AlertTitle>Error</AlertTitle>
+ *   <AlertDescription>Something went wrong.</AlertDescription>
  * </Alert>
  *
- * // Inline alert (renders as fragment with strong/span)
+ * // Inline alert (renders as React.Fragment with <strong> title and <span> description)
  * <Alert variant="inline">
  *   <AlertTitle>Note:</AlertTitle>
  *   <AlertDescription>This is an inline message.</AlertDescription>

package/src/components/Avatar/Avatar.test.tsx

@@ -409,13 +409,13 @@ describe('Avatar Component', () => {
   describe('Integration', () => {
     it('works within user profile components', () => {
       renderWithProviders(
-        <div className="user-profile">
+        <section className="user-profile">
           <Avatar src="/user.jpg" alt="Profile" fallback="UP" />
-          <div>
+          <section>
             <h3>User Name</h3>
             <p>User description</p>
-          </div>
-        </div>
+          </section>
+        </section>
       );
       
       expect(screen.getByAltText('Profile')).toBeInTheDocument();

package/src/components/Badge/Badge.tsx

@@ -49,6 +49,14 @@ import { cn } from '../../utils/core/cn';
 // TYPE DEFINITIONS
 // ============================================================================
 
+/**
+ * Badge variant type
+ * Defines the visual style, color palette, and shade intensity of the badge.
+ * Format: {style}-{color}-{shade}
+ * - style: 'solid' | 'outline' | 'soft'
+ * - color: 'main' | 'sec' | 'acc'
+ * - shade: 'muted' | 'normal' | 'strong'
+ */
 export type BadgeVariant =
   | 'solid-main-muted' | 'solid-main-normal' | 'solid-main-strong'
   | 'solid-sec-muted' | 'solid-sec-normal' | 'solid-sec-strong'
@@ -60,6 +68,12 @@ export type BadgeVariant =
   | 'soft-sec-muted' | 'soft-sec-normal' | 'soft-sec-strong'
   | 'soft-acc-muted' | 'soft-acc-normal' | 'soft-acc-strong';
 
+/**
+ * Badge component props
+ * Extends standard HTML span attributes with badge-specific styling options.
+ * 
+ * @interface BadgeProps
+ */
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   /** Visual variant of the badge (style-color-shade) */
   variant?: BadgeVariant;
@@ -251,8 +265,7 @@ function getBadgeClasses(variant: BadgeVariant = 'solid-main-normal'): string {
  * <Badge variant="soft-acc-strong">Featured</Badge>
  * ```
  */
-const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
-  ({ className, variant = 'solid-main-normal', ...props }, ref) => {
+function Badge({ className, variant = 'solid-main-normal', ref, ...props }: BadgeProps & { ref?: React.Ref<HTMLSpanElement> }) {
     const isSoftVariant = variant.startsWith('soft-');
     
     if (isSoftVariant) {
@@ -291,8 +304,7 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
         {...props}
       />
     );
-  }
-);
+}
 
 Badge.displayName = 'Badge';
 

package/src/components/Button/Button.tsx

@@ -53,6 +53,16 @@ import { Tooltip } from '../Tooltip';
 // BASE BUTTON COMPONENT
 // ============================================================================
 
+/**
+ * Button component props
+ * Extends standard HTML button attributes with button-specific styling and behavior options.
+ * 
+ * @interface ButtonProps
+ */
+/**
+ * Props for the Button component.
+ * Extends standard button HTML attributes.
+ */
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** Visual variant of the button */
   variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
@@ -127,6 +137,12 @@ Button.displayName = 'Button';
 // BUTTON GROUP COMPONENT
 // ============================================================================
 
+/**
+ * ButtonGroup component props
+ * Configuration for grouping multiple buttons with consistent styling and spacing.
+ * 
+ * @interface ButtonGroupProps
+ */
 export type ButtonGroupProps = {
   /** Child elements to be rendered in the group */
   children: React.ReactNode;
@@ -198,11 +214,12 @@ export function ButtonGroup({
           // Type assertion needed because React.ComponentType doesn't guarantee displayName
           const componentType = child.type as React.ComponentType<unknown> & { displayName?: string };
           if (componentType.displayName === 'Button') {
+            const childProps = child.props as { variant?: string; size?: string; [key: string]: unknown };
             return React.cloneElement(child, {
-              variant: child.props.variant || variant,
-              size: child.props.size || size,
-              ...child.props
-            });
+              variant: childProps.variant || variant,
+              size: childProps.size || size,
+              ...childProps
+            } as typeof childProps);
           }
         }
         return child;
@@ -215,6 +232,12 @@ export function ButtonGroup({
 // ICON BUTTON COMPONENT
 // ============================================================================
 
+/**
+ * IconButton component props
+ * Extends ButtonProps but requires an icon and aria-label instead of children.
+ * 
+ * @interface IconButtonProps
+ */
 export type IconButtonProps = Omit<ButtonProps, 'children'> & {
   /** The icon element to display in the button */
   icon: React.ReactNode;

package/src/components/Calendar/Calendar.tsx

@@ -89,6 +89,10 @@ type RootProps = {
 // CALENDAR COMPONENT
 // ============================================================================
 
+/**
+ * Props for the Calendar component.
+ * Extends DayPickerProps with pace-core specific customizations.
+ */
 export interface CalendarProps extends Omit<DayPickerProps, 'className' | 'classNames' | 'styles' | 'onSelect'> {
   /**
    * Additional CSS classes to apply to the calendar table
@@ -350,7 +354,7 @@ const Calendar = React.forwardRef<HTMLTableElement, CalendarProps>(
                 goToMonth(nextMonth);
               };
               
-              const monthGridElement = monthGridChild as React.ReactElement & {
+              const monthGridElement = monthGridChild as React.ReactElement<any> & {
                 ref?: React.Ref<HTMLTableElement | null>;
               };
               const mergedRef =
@@ -416,8 +420,10 @@ const Calendar = React.forwardRef<HTMLTableElement, CalendarProps>(
                 </>
               );
             }
-            
-            return child;
+
+            return React.isValidElement(child) 
+              ? React.cloneElement(child, { key: child.key ?? `calendar-child-${index}` })
+              : child;
           })}
         </>
       );

package/src/components/Card/Card.tsx

@@ -65,6 +65,10 @@ import * as React from "react"
 import { useNavigate } from "react-router-dom"
 import { cn } from "../../utils/core/cn"
 
+/**
+ * Props for the Card component.
+ * Extends standard HTML attributes for semantic HTML elements.
+ */
 export interface CardProps extends React.HTMLAttributes<HTMLElement> {
   /** Visual variant of the card */
   variant?: 'default' | 'outline' | 'ghost';

package/src/components/Checkbox/Checkbox.test.tsx

@@ -235,10 +235,10 @@ describe('Checkbox Component', () => {
 
     it('supports aria-labelledby', () => {
       renderWithProviders(
-        <div>
+        <>
           <label id="terms-label">Accept terms and conditions</label>
           <Checkbox aria-labelledby="terms-label" />
-        </div>
+        </>
       );
       const checkbox = screen.getByRole('checkbox', { name: 'Accept terms and conditions' });
       expect(checkbox).toBeInTheDocument();
@@ -246,10 +246,10 @@ describe('Checkbox Component', () => {
 
     it('supports aria-describedby', () => {
       renderWithProviders(
-        <div>
+        <>
           <Checkbox aria-describedby="terms-help" />
-          <div id="terms-help">Please read the terms carefully</div>
-        </div>
+          <span id="terms-help">Please read the terms carefully</span>
+        </>
       );
       const checkbox = screen.getByRole('checkbox');
       expect(checkbox).toHaveAttribute('aria-describedby', 'terms-help');
@@ -319,10 +319,10 @@ describe('Checkbox Component', () => {
   describe('Form Integration', () => {
     it('works with form labels', () => {
       renderWithProviders(
-        <div>
+        <>
           <label htmlFor="terms-checkbox">Accept terms and conditions</label>
           <Checkbox id="terms-checkbox" />
-        </div>
+        </>
       );
       
       const checkbox = screen.getByRole('checkbox');
@@ -388,11 +388,11 @@ describe('Checkbox Component', () => {
   describe('Integration', () => {
     it('works with multiple checkboxes', () => {
       renderWithProviders(
-        <div>
+        <>
           <Checkbox id="option1" />
           <Checkbox id="option2" />
           <Checkbox id="option3" />
-        </div>
+        </>
       );
       
       expect(screen.getAllByRole('checkbox')).toHaveLength(3);
@@ -420,13 +420,13 @@ describe('Checkbox Component', () => {
       const TestComponent = () => {
         const [checked, setChecked] = React.useState(false);
         return (
-          <div>
+          <>
             <Checkbox 
               checked={checked} 
               onCheckedChange={setChecked}
             />
             <span data-testid="status">{checked ? 'checked' : 'unchecked'}</span>
-          </div>
+          </>
         );
       };
       
@@ -470,7 +470,7 @@ describe('Checkbox Component', () => {
       ));
       
       const startTime = performance.now();
-      renderWithProviders(<div>{checkboxes}</div>);
+      renderWithProviders(<>{checkboxes}</>);
       const endTime = performance.now();
       
       // Performance test: verify rendering completes in reasonable time

package/src/components/Checkbox/Checkbox.tsx

@@ -21,10 +21,10 @@
  * <Checkbox />
  *
  * // With label
- * <div className="flex items-center space-x-2">
+ * <>
  *   <Checkbox id="terms" />
  *   <label htmlFor="terms">Accept terms and conditions</label>
- * </div>
+ * </>
  *
  * // Disabled state
  * <Checkbox disabled />