@jmruthers/pace-core 0.5.135 → 0.5.137

package/src/components/Form/Form.test.tsx

@@ -12,11 +12,11 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { z } from 'zod';
-import { Form, FormField, FormFieldset, FormErrorSummary, FormLiveRegion } from './index';
+import { Form, FormField } from './index';
 import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 
 // Mock the cn utility
-vi.mock('../../utils/cn', () => ({
+vi.mock('../../utils/core/cn', () => ({
   cn: (...classes: (string | undefined)[]) => classes.filter(Boolean).join(' ')
 }));
 
@@ -566,507 +566,6 @@ describe('FormField Component', () => {
   });
 });
 
-describe('FormFieldset Component', () => {
-    describe('Rendering', () => {
-    it('renders with legend', () => {
-      renderWithProviders(
-        <FormFieldset legend="Personal Information">
-          <div>Field content</div>
-        </FormFieldset>
-      );
-      
-      expect(screen.getByText('Personal Information')).toBeInTheDocument();
-      expect(screen.getByRole('group')).toBeInTheDocument();
-    });
-
-    it('renders with description', () => {
-      renderWithProviders(
-        <FormFieldset 
-          legend="Personal Information"
-          description="Please provide your personal details"
-        >
-          <div>Field content</div>
-        </FormFieldset>
-      );
-      
-      expect(screen.getByText('Please provide your personal details')).toBeInTheDocument();
-    });
-
-    it('renders with required indicator', () => {
-      renderWithProviders(
-        <FormFieldset legend="Personal Information" required>
-          <div>Field content</div>
-        </FormFieldset>
-      );
-      
-      expect(screen.getByText('*')).toBeInTheDocument();
-    });
-
-    it('renders with custom className', () => {
-      renderWithProviders(
-        <FormFieldset 
-          legend="Personal Information" 
-          className="custom-fieldset"
-        >
-          <div>Field content</div>
-        </FormFieldset>
-      );
-      
-      const fieldset = screen.getByRole('group');
-      expect(fieldset).toHaveClass('custom-fieldset');
-    });
-
-    it('forwards ref correctly', () => {
-      const ref = { current: null };
-      
-      renderWithProviders(
-        <FormFieldset legend="Personal Information" ref={ref}>
-          <div>Field content</div>
-        </FormFieldset>
-      );
-      
-      expect(ref.current).toBeInstanceOf(HTMLFieldSetElement);
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('has proper ARIA attributes', () => {
-      renderWithProviders(
-        <FormFieldset 
-          legend="Personal Information"
-          description="Please provide your personal details"
-        >
-          <div>Field content</div>
-        </FormFieldset>
-      );
-      
-      const fieldset = screen.getByRole('group');
-      const description = screen.getByText('Please provide your personal details');
-      
-      expect(fieldset).toHaveAttribute('aria-describedby', description.id);
-    });
-
-    it('has proper semantic structure', () => {
-      renderWithProviders(
-        <FormFieldset legend="Personal Information">
-          <div>Field content</div>
-        </FormFieldset>
-      );
-      
-      const fieldset = screen.getByRole('group');
-      const legend = screen.getByText('Personal Information');
-      
-      expect(fieldset).toBeInTheDocument();
-      expect(legend).toBeInTheDocument();
-    });
-  });
-});
-
-describe('FormErrorSummary Component', () => {
-    describe('Rendering', () => {
-    it('renders nothing when no errors', () => {
-      renderWithProviders(
-        <FormErrorSummary errors={{}} />
-      );
-      
-      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-    });
-
-    it('renders with default title', () => {
-      const errors = {
-        name: { message: 'Name is required' },
-        email: { message: 'Email is invalid' }
-      };
-      
-      renderWithProviders(
-        <FormErrorSummary errors={errors} />
-      );
-      
-      expect(screen.getByText('Please fix the following errors:')).toBeInTheDocument();
-      expect(screen.getByText('Name is required')).toBeInTheDocument();
-      expect(screen.getByText('Email is invalid')).toBeInTheDocument();
-    });
-
-    it('renders with custom title', () => {
-      const errors = {
-        name: { message: 'Name is required' }
-      };
-      
-      renderWithProviders(
-        <FormErrorSummary 
-          errors={errors} 
-          title="Please correct these issues:"
-        />
-      );
-      
-      expect(screen.getByText('Please correct these issues:')).toBeInTheDocument();
-    });
-
-    it('renders with field names when showFieldNames is true', () => {
-      const errors = {
-        name: { message: 'Name is required' },
-        email: { message: 'Email is invalid' }
-      };
-      
-      renderWithProviders(
-        <FormErrorSummary 
-          errors={errors} 
-          showFieldNames={true}
-        />
-      );
-      
-      expect(screen.getByText('name: Name is required')).toBeInTheDocument();
-      expect(screen.getByText('email: Email is invalid')).toBeInTheDocument();
-    });
-
-    it('filters out empty errors', () => {
-      const errors = {
-        name: { message: 'Name is required' },
-        email: null,
-        phone: undefined,
-        address: ''
-      };
-      
-      renderWithProviders(
-        <FormErrorSummary errors={errors} />
-      );
-      
-      expect(screen.getByText('Name is required')).toBeInTheDocument();
-      expect(screen.queryByText('email:')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Error Message Handling', () => {
-    it('handles string error messages', () => {
-      const errors = {
-        name: 'Name is required'
-      };
-      
-      renderWithProviders(
-        <FormErrorSummary errors={errors} />
-      );
-      
-      expect(screen.getByText('Name is required')).toBeInTheDocument();
-    });
-
-    it('handles object error messages', () => {
-      const errors = {
-        name: { message: 'Name is required' }
-      };
-      
-      renderWithProviders(
-        <FormErrorSummary errors={errors} />
-      );
-      
-      expect(screen.getByText('Name is required')).toBeInTheDocument();
-    });
-  });
-});
-
-describe('FormLiveRegion Component', () => {
-    describe('Rendering', () => {
-    it('renders nothing when no message', () => {
-      const mockForm = {
-        formState: {
-          isSubmitting: false,
-          isSubmitSuccessful: false,
-          errors: {},
-          isValid: false,
-          isDirty: false
-        }
-      } as any;
-      
-      renderWithProviders(
-        <FormLiveRegion form={mockForm} />
-      );
-      
-      expect(screen.queryByRole('status')).not.toBeInTheDocument();
-    });
-
-    it('renders with default politeness', () => {
-      const mockForm = {
-        formState: {
-          isSubmitting: true,
-          isSubmitSuccessful: false,
-          errors: {},
-          isValid: false,
-          isDirty: false
-        }
-      } as any;
-      
-      renderWithProviders(
-        <FormLiveRegion form={mockForm} />
-      );
-      
-      const liveRegion = screen.getByRole('status');
-      expect(liveRegion).toHaveAttribute('aria-live', 'polite');
-    });
-
-    it('renders with custom politeness', () => {
-      const mockForm = {
-        formState: {
-          isSubmitting: true,
-          isSubmitSuccessful: false,
-          errors: {},
-          isValid: false,
-          isDirty: false
-        }
-      } as any;
-      
-      renderWithProviders(
-        <FormLiveRegion form={mockForm} politeness="assertive" />
-      );
-      
-      const liveRegion = screen.getByRole('status');
-      expect(liveRegion).toHaveAttribute('aria-live', 'assertive');
-    });
-  });
-
-  describe('Form State Announcements', () => {
-    it('announces submitting state', () => {
-      const mockForm = {
-        formState: {
-          isSubmitting: true,
-          isSubmitSuccessful: false,
-          errors: {},
-          isValid: false,
-          isDirty: false
-        }
-      } as any;
-      
-      renderWithProviders(
-        <FormLiveRegion form={mockForm} />
-      );
-      
-      expect(screen.getByText('Submitting form...')).toBeInTheDocument();
-    });
-
-    it('announces successful submission', async () => {
-      vi.useFakeTimers();
-      
-      const mockForm = {
-        formState: {
-          isSubmitting: false,
-          isSubmitSuccessful: true,
-          errors: {},
-          isValid: false,
-          isDirty: false
-        }
-      } as any;
-      
-      renderWithProviders(
-        <FormLiveRegion form={mockForm} />
-      );
-      
-      // Advance timers to trigger the timeout
-      await act(async () => {
-        vi.advanceTimersByTime(500);
-      });
-      
-      // The message should be set after the timeout
-      expect(screen.getByRole('status')).toHaveTextContent('Form submitted successfully');
-      
-      vi.useRealTimers();
-    });
-
-    it('announces custom success message', async () => {
-      vi.useFakeTimers();
-      
-      const mockForm = {
-        formState: {
-          isSubmitting: false,
-          isSubmitSuccessful: true,
-          errors: {},
-          isValid: false,
-          isDirty: false
-        }
-      } as any;
-      
-      renderWithProviders(
-        <FormLiveRegion 
-          form={mockForm} 
-          successMessage="Your data was saved successfully!"
-        />
-      );
-      
-      await act(async () => {
-        vi.advanceTimersByTime(500);
-      });
-      
-      expect(screen.getByRole('status')).toHaveTextContent('Your data was saved successfully!');
-      
-      vi.useRealTimers();
-    });
-
-    it('announces form errors', async () => {
-      const mockForm = {
-        formState: {
-          isSubmitting: false,
-          isSubmitSuccessful: false,
-          errors: {
-            name: { message: 'Name is required' },
-            email: { message: 'Email is invalid' }
-          },
-          isValid: false,
-          isDirty: false,
-          touchedFields: {}
-        }
-      } as any;
-      
-      renderWithProviders(
-        <FormLiveRegion form={mockForm} />
-      );
-      
-      // Error messages are set immediately without a timeout
-      expect(screen.getByRole('status')).toHaveTextContent('Form has 2 errors in: name, email');
-    });
-
-    it('announces single error', async () => {
-      const mockForm = {
-        formState: {
-          isSubmitting: false,
-          isSubmitSuccessful: false,
-          errors: {
-            name: { message: 'Name is required' }
-          },
-          isValid: false,
-          isDirty: false,
-          touchedFields: {}
-        }
-      } as any;
-      
-      renderWithProviders(
-        <FormLiveRegion form={mockForm} />
-      );
-      
-      // Error messages are set immediately without a timeout
-      expect(screen.getByRole('status')).toHaveTextContent('Form has 1 error in: name');
-    });
-
-    it('announces valid form', () => {
-      const mockForm = {
-        formState: {
-          isSubmitting: false,
-          isSubmitSuccessful: false,
-          errors: {},
-          isValid: true,
-          isDirty: true
-        }
-      } as any;
-      
-      renderWithProviders(
-        <FormLiveRegion form={mockForm} />
-      );
-      
-      expect(screen.getByRole('status')).toHaveTextContent('Form is valid');
-    });
-  });
-
-  describe('Field-Level Announcements', () => {
-    it('announces field errors when enabled', async () => {
-      vi.useFakeTimers();
-      
-      const mockForm = {
-        formState: {
-          isSubmitting: false,
-          isSubmitSuccessful: false,
-          errors: {
-            name: { message: 'Name is required' }
-          },
-          touchedFields: { name: true },
-          isValid: false,
-          isDirty: false
-        }
-      } as any;
-      
-      renderWithProviders(
-        <FormLiveRegion form={mockForm} enableFieldAnnouncements={true} />
-      );
-      
-      await act(async () => {
-        vi.advanceTimersByTime(500);
-      });
-      
-      expect(screen.getByRole('status')).toHaveTextContent('name: Name is required');
-      
-      vi.useRealTimers();
-    });
-
-    it('does not announce field errors when disabled', () => {
-      vi.useFakeTimers();
-      
-      const mockForm = {
-        formState: {
-          isSubmitting: false,
-          isSubmitSuccessful: false,
-          errors: {
-            name: { message: 'Name is required' }
-          },
-          touchedFields: { name: true },
-          isValid: false,
-          isDirty: false
-        }
-      } as any;
-      
-      renderWithProviders(
-        <FormLiveRegion form={mockForm} enableFieldAnnouncements={false} />
-      );
-      
-      vi.advanceTimersByTime(500);
-      
-      vi.useRealTimers();
-      
-      expect(screen.queryByText('name: Name is required')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('has proper ARIA attributes', () => {
-      const mockForm = {
-        formState: {
-          isSubmitting: true,
-          isSubmitSuccessful: false,
-          errors: {},
-          isValid: false,
-          isDirty: false
-        }
-      } as any;
-      
-      renderWithProviders(
-        <FormLiveRegion form={mockForm} />
-      );
-      
-      const liveRegion = screen.getByRole('status');
-      expect(liveRegion).toHaveAttribute('aria-live', 'polite');
-      expect(liveRegion).toHaveAttribute('aria-atomic', 'true');
-    });
-
-    it('is visually hidden', () => {
-      const mockForm = {
-        formState: {
-          isSubmitting: true,
-          isSubmitSuccessful: false,
-          errors: {},
-          isValid: false,
-          isDirty: false
-        }
-      } as any;
-      
-      renderWithProviders(
-        <FormLiveRegion form={mockForm} />
-      );
-      
-      const liveRegion = screen.getByRole('status');
-      expect(liveRegion).toHaveClass('sr-only');
-      expect(liveRegion.getAttribute('style')).toContain('position: absolute');
-      expect(liveRegion.getAttribute('style')).toContain('left: -10000px');
-      expect(liveRegion.getAttribute('style')).toContain('width: 1px');
-      expect(liveRegion.getAttribute('style')).toContain('height: 1px');
-      expect(liveRegion.getAttribute('style')).toContain('overflow: hidden');
-    });
-  });
-});
-
 describe('Integration', () => {
   const user = userEvent.setup();
 
@@ -1086,12 +585,9 @@ describe('Integration', () => {
         onError={onError}
         defaultValues={{ name: '', email: '', age: 0 }}
       >
-        <FormFieldset legend="Personal Information">
-          <FormField name="name" label="Name" />
-          <FormField name="email" label="Email" type="email" />
-          <FormField name="age" label="Age" type="number" />
-        </FormFieldset>
-        <FormErrorSummary />
+        <FormField name="name" label="Name" />
+        <FormField name="email" label="Email" type="email" />
+        <FormField name="age" label="Age" type="number" />
         <button type="submit">Submit</button>
       </Form>
     );
@@ -1131,7 +627,6 @@ describe('Integration', () => {
       >
         <FormField name="name" label="Name" />
         <FormField name="email" label="Email" type="email" />
-        <FormErrorSummary />
         <button type="submit">Submit</button>
       </Form>
     );

package/src/components/Form/Form.tsx

@@ -75,7 +75,7 @@ import React from 'react';
 import { useForm, FormProvider, UseFormReturn, FieldValues, DefaultValues, SubmitHandler, SubmitErrorHandler } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/core/cn';
 
 /**
  * Props for the Form component

package/src/components/Form/FormField.tsx

@@ -87,7 +87,7 @@
 
 import React from 'react';
 import { useFormContext, Controller, FieldPath, FieldValues } from 'react-hook-form';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/core/cn';
 import { Label } from '../Label';
 
 export interface FormFieldProps<

package/src/components/Form/index.ts

@@ -12,15 +12,3 @@ export type { FormProps } from './Form';
 // Form Field component
 export { FormField } from './FormField';
 export type { FormFieldProps } from './FormField';
-
-// Form Error Summary component
-export { FormErrorSummary } from './FormErrorSummary';
-export type { FormErrorSummaryProps } from './FormErrorSummary';
-
-// Form Live Region component
-export { FormLiveRegion } from './FormLiveRegion';
-export type { FormLiveRegionProps } from './FormLiveRegion';
-
-// Form Fieldset component
-export { FormFieldset } from './FormFieldset';
-export type { FormFieldsetProps } from './FormFieldset';

package/src/components/Header/Header.tsx

@@ -88,7 +88,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { User } from '@supabase/supabase-js';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/core/cn';
 import { EventSelector } from '../EventSelector';
 import { UserMenu } from '../UserMenu';
 import { NavigationMenu } from '../NavigationMenu';

package/src/components/Input/Input.tsx

@@ -49,7 +49,7 @@
  */
 
 import * as React from 'react';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/core/cn';
 
 // ============================================================================
 // BASE INPUT COMPONENT

package/src/components/Label/Label.tsx

@@ -75,7 +75,7 @@
 
 import * as React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/core/cn';
 
 const getLabelClasses = (): string => {
   return 'font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70';

package/src/components/LoginForm/LoginForm.test.tsx

@@ -100,7 +100,7 @@ vi.mock('../Alert/Alert', () => ({
 }));
 
 // Mock the cn utility
-vi.mock('../../utils/cn', () => ({
+vi.mock('../../utils/core/cn', () => ({
   cn: (...classes: any[]) => classes.filter(Boolean).join(' '),
 }));
 

package/src/components/LoginForm/LoginForm.tsx

@@ -104,7 +104,7 @@ import { Input } from '../Input/Input';
 import { Label } from '../Label/Label';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../Card/index';
 import { Alert, AlertDescription } from '../Alert/Alert';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/core/cn';
 
 export interface LoginFormProps {
   /** Callback invoked when the form is submitted */

package/src/components/NavigationMenu/NavigationMenu.test.tsx

@@ -11,6 +11,7 @@ import { NavigationMenu } from './NavigationMenu';
 import { NavigationItem } from './types';
 import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 import { AccessLevel } from '../../types/unified';
+import { Logger, LogLevel } from '../../utils/core/logger';
 
 // Mock the UnifiedAuthProvider
 const mockAuthContext = {
@@ -87,6 +88,7 @@ vi.mock('../../rbac/hooks/usePermissions', () => ({
 
 // Mock console methods to avoid noise in tests
 const originalConsoleLog = console.log;
+const originalConsoleDebug = console.debug;
 const originalConsoleWarn = console.warn;
 const originalConsoleError = console.error;
 
@@ -133,8 +135,19 @@ describe('NavigationMenu Component', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     
-    // Reset console mocks
+    // Ensure logger is enabled by setting MODE to development
+    (import.meta.env as any).MODE = 'development';
+    
+    // Configure logger to ensure it logs in test environment
+    Logger.configure({
+      level: LogLevel.DEBUG,
+      includeTimestamp: false,
+      includeComponent: true,
+    });
+    
+    // Reset console mocks (logger uses console.debug, console.warn, console.error)
     console.log = vi.fn();
+    console.debug = vi.fn();
     console.warn = vi.fn();
     console.error = vi.fn();
     
@@ -178,6 +191,7 @@ describe('NavigationMenu Component', () => {
   afterEach(() => {
     // Restore console methods
     console.log = originalConsoleLog;
+    console.debug = originalConsoleDebug;
     console.warn = originalConsoleWarn;
     console.error = originalConsoleError;
   });
@@ -1104,7 +1118,8 @@ describe('NavigationMenu Component', () => {
       const homeItem = screen.getByText('Home');
       await user.click(homeItem);
 
-      expect(console.log).toHaveBeenCalledWith(
+      // Logger.debug calls console.debug with formatted message
+      expect(console.debug).toHaveBeenCalledWith(
         expect.stringContaining('[NavigationMenu] Navigation access attempt:'),
         expect.objectContaining({
           itemId: 'home',
@@ -1135,7 +1150,8 @@ describe('NavigationMenu Component', () => {
       const homeItem = screen.getByText('Home');
       await user.click(homeItem);
 
-      expect(console.log).not.toHaveBeenCalledWith(
+      // Logger.debug should not be called when auditLog is disabled
+      expect(console.debug).not.toHaveBeenCalledWith(
         expect.stringContaining('[NavigationMenu] Navigation access attempt:')
       );
     });