@jmruthers/pace-core 0.2.6 → 0.4.1

package/src/components/PaceAppLayout/index.ts

@@ -1 +0,0 @@
-export * from './PaceAppLayout'; 

package/src/components/PaceLoginPage/PaceLoginPage.tsx

@@ -1,221 +0,0 @@
-/**
- * @file PACE Login Page Component
- * @package @jmruthers/pace-core
- * @module Components/PaceLoginPage
- * @since 0.1.0
- *
- * A comprehensive login page component that provides a consistent authentication
- * experience for all PACE suite applications with role-based redirection and
- * enhanced error handling.
- *
- * Features:
- * - Consistent login page layout
- * - Unified authentication integration
- * - Role-based automatic redirection (admin users)
- * - Manual redirection for all successful logins
- * - Customizable app branding
- * - Configurable redirect paths
- * - Enhanced error handling and display
- * - Dual loading state management (auth + form)
- * - Navigation error recovery
- * - Responsive design
- * - Accessibility compliant
- * - Integration with LoginForm
- * - React Router navigation
- * - Centered layout design
- * - Error persistence and display
- *
- * @example
- * ```tsx
- * // Basic login page
- * <PaceLoginPage appName="My Application" />
- * 
- * // Login page with custom redirect
- * <PaceLoginPage
- *   appName="Dashboard App"
- *   onSuccessRedirectPath="/dashboard"
- * />
- * 
- * // Login page in router setup
- * <Router>
- *   <Routes>
- *     <Route path="/login" element={
- *       <PaceLoginPage 
- *         appName="My App"
- *         onSuccessRedirectPath="/home"
- *       />
- *     } />
- *     <Route path="/home" element={<HomePage />} />
- *   </Routes>
- * </Router>
- * 
- * // Login page with authentication provider
- * <UnifiedAuthProvider supabaseClient={supabase} appName="My App">
- *   <Router>
- *     <Routes>
- *       <Route path="/login" element={
- *         <PaceLoginPage appName="My Application" />
- *       } />
- *       <Route path="/" element={<PaceAppLayout appName="My Application" />}>
- *         <Route index element={<HomePage />} />
- *       </Route>
- *     </Routes>
- *   </Router>
- * </UnifiedAuthProvider>
- * 
- * // Login page with role-based access control
- * function App() {
- *   return (
- *     <UnifiedAuthProvider supabaseClient={supabase} appName="Admin Portal">
- *       <Router>
- *         <Routes>
- *           <Route path="/login" element={
- *             <PaceLoginPage 
- *               appName="Admin Portal"
- *               onSuccessRedirectPath="/admin/dashboard"
- *             />
- *           } />
- *           <Route path="/admin/*" element={<AdminRoutes />} />
- *         </Routes>
- *       </Router>
- *     </UnifiedAuthProvider>
- *   );
- * }
- * ```
- *
- * @accessibility
- * - WCAG 2.1 AA compliant
- * - Proper semantic HTML structure
- * - Screen reader friendly
- * - Keyboard navigation support
- * - Focus management
- * - High contrast support
- * - Clear page hierarchy
- * - Accessible form elements
- * - Error announcements
- *
- * @routing
- * - React Router v6 integration
- * - Automatic navigation on success
- * - Role-based redirect logic (admin users)
- * - Configurable redirect paths
- * - Replace navigation for login flow
- * - Navigation error handling
- *
- * @authentication
- * - Integration with UnifiedAuthProvider
- * - Role detection via hasRole('admin')
- * - Loading state management
- * - Error state handling
- * - Session validation
- * - Automatic redirect prevention loops
- *
- * @dependencies
- * - React 18+ - Hooks and effects
- * - React Router v6 - Navigation
- * - UnifiedAuthProvider - Authentication
- * - LoginForm component
- * - Button component
- * - Input component
- * - Label component
- * - Tailwind CSS - Styling
- */
-
-import React, { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useUnifiedAuth } from '../../providers';
-import { LoginForm } from '../LoginForm';
-import { Button, Input, Label } from '..';
-
-export interface PaceLoginPageProps {
-  /** The name of the application to be displayed on the login form. */
-  appName: string;
-  /** The path to redirect to upon successful login. Defaults to `/`. */
-  onSuccessRedirectPath?: string;
-}
-
-/**
- * A consistent, reusable login page for all PACE suite applications.
- * It handles the sign-in logic with role-based automatic redirection for admin users,
- * enhanced error handling, and dual loading state management.
- * 
- * Recent enhancements:
- * - Role-based redirection: Admin users are automatically redirected
- * - Enhanced error handling with navigation error recovery
- * - Dual loading states: auth loading + form submission loading
- * - Error persistence: Auth errors are displayed below the form
- * - Navigation safety: Try-catch blocks prevent navigation errors
- * 
- * @param props - Login page configuration including app name and redirect path
- * @returns JSX.Element - The rendered login page with enhanced functionality
- * 
- * @example
- * ```tsx
- * <PaceLoginPage 
- *   appName="My Application" 
- *   onSuccessRedirectPath="/dashboard" 
- * />
- * ```
- */
-export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
-  appName = 'Pace',
-  onSuccessRedirectPath = '/'
-}) => {
-  const { signIn, isAuthenticated, isLoading, authError, hasRole } = useUnifiedAuth();
-  const navigate = useNavigate();
-  const [isSigningIn, setIsSigningIn] = useState(false);
-
-  useEffect(() => {
-    // Only redirect super admin users automatically
-    if (isAuthenticated && !isLoading && hasRole('super_admin')) {
-      try {
-        navigate(onSuccessRedirectPath, { replace: true });
-      } catch (error) {
-        console.error('Navigation error:', error);
-      }
-    }
-  }, [isAuthenticated, isLoading, navigate, onSuccessRedirectPath, hasRole]);
-
-  const handleSubmit = async (data: { email: string; password: string }) => {
-    setIsSigningIn(true);
-    try {
-      const { error } = await signIn(data.email, data.password);
-
-      if (!error) {
-        try {
-          navigate(onSuccessRedirectPath, { replace: true });
-        } catch (navError) {
-          console.error('Navigation error after sign-in:', navError);
-        }
-      }
-    } finally {
-      setIsSigningIn(false);
-    }
-  };
-
-  return (
-    <main className="min-h-screen grid mx-auto w-fit content-center justify-items-center gap-y-8" aria-label={`${appName} Login Page`}>
-      <img
-        src={`/${appName.toLowerCase()}_logo_square.svg`}
-        alt={`${appName} logo`}
-        className="h-48"
-      />
-
-        <LoginForm className="w-md"
-          onSignIn={handleSubmit}
-          appName={appName}
-          isLoading={isSigningIn}
-          onError={(error) => {
-            // LoginForm will handle display of the error
-            console.error('Login error:', error);
-          }}
-        />
-        {authError && (
-          <em className="mt-4 text-destructive text-center">
-            {authError.message}
-          </em>
-        )}
-
-    </main>
-  );
-} 

package/src/components/PaceLoginPage/__tests__/PaceLoginPage.accessibility.test.tsx

@@ -1,463 +0,0 @@
-import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { MemoryRouter } from 'react-router-dom';
-import { vi } from 'vitest';
-import '@testing-library/jest-dom';
-import { UnifiedAuthProvider } from '../../../providers/UnifiedAuthProvider';
-import { PaceLoginPage } from '../PaceLoginPage';
-import { renderWithProviders, createMockSupabaseClient } from '../../../__tests__/shared';
-
-// Extend expect to include axe matchers
-expect.extend(toHaveNoViolations);
-
-// Mock Supabase client
-const mockSupabaseClient = createMockSupabaseClient();
-
-vi.mock('@supabase/supabase-js', () => ({
-  createClient: vi.fn(() => mockSupabaseClient),
-}));
-
-const TestWrapper: React.FC<{ children: React.ReactNode; appName?: string }> = ({ 
-  children, 
-  appName = "Test App" 
-}) => (
-  <MemoryRouter>
-    <UnifiedAuthProvider appName={appName} supabaseClient={mockSupabaseClient as any}>
-      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100vh', gap: '2rem' }}>
-        <h1>{appName}</h1>
-        <div style={{ width: '400px' }}>
-          {children}
-        </div>
-      </div>
-    </UnifiedAuthProvider>
-  </MemoryRouter>
-);
-
-describe('PaceLoginPage Accessibility', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    
-    mockSupabaseClient.auth.signInWithPassword.mockResolvedValue({
-      data: { user: null, session: null },
-      error: null,
-    });
-    // Ensure from method returns a proper query builder
-    mockSupabaseClient.from.mockReturnValue({
-      select: vi.fn().mockReturnThis(),
-      eq: vi.fn().mockReturnThis(),
-      single: vi.fn().mockResolvedValue({ data: null, error: null }),
-      insert: vi.fn().mockReturnThis(),
-      update: vi.fn().mockReturnThis(),
-      delete: vi.fn().mockReturnThis(),
-    });
-    // Ensure rpc method returns proper structure
-    mockSupabaseClient.rpc.mockResolvedValue({ data: null, error: null });
-  });
-
-  describe('WCAG Compliance', () => {
-    it('should meet WCAG 2.1 AA standards', async () => {
-      const { container } = renderWithProviders(
-        <TestWrapper appName="WCAG App">
-          <PaceLoginPage appName="WCAG App" />
-        </TestWrapper>
-      );
-
-      const results = await axe(container, {
-        rules: {
-          'heading-order': { enabled: false }, // Disable for demo app structure
-          'landmark-main-is-top-level': { enabled: false }, // Disable for test wrapper structure
-          'landmark-no-duplicate-main': { enabled: false }, // Disable for test wrapper structure
-        },
-      });
-      expect(results).toHaveNoViolations();
-    });
-
-    it('should have proper color contrast ratios', async () => {
-      const { container } = renderWithProviders(
-        <TestWrapper appName="Contrast App">
-          <PaceLoginPage appName="Contrast App" />
-        </TestWrapper>
-      );
-
-      const results = await axe(container, {
-        rules: {
-          'heading-order': { enabled: false }, // Disable for demo app structure
-          'landmark-main-is-top-level': { enabled: false }, // Disable for test wrapper structure
-          'landmark-no-duplicate-main': { enabled: false }, // Disable for test wrapper structure
-          'color-contrast': { enabled: true },
-        },
-      });
-      expect(results).toHaveNoViolations();
-    });
-
-    it('should have proper form structure and labels', async () => {
-      renderWithProviders(
-        <TestWrapper appName="Form Structure App">
-          <PaceLoginPage appName="Form Structure App" />
-        </TestWrapper>
-      );
-
-      // Check for form element using test ID
-      const form = screen.getByTestId('login-form');
-      expect(form).toBeInTheDocument();
-
-      // Check for proper labels
-      const emailLabel = screen.getByText('Email');
-      const passwordLabel = screen.getByText('Password');
-      expect(emailLabel).toBeInTheDocument();
-      expect(passwordLabel).toBeInTheDocument();
-
-      // Check label associations
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-      expect(emailInput).toHaveAttribute('id', 'email');
-      expect(passwordInput).toHaveAttribute('id', 'password');
-      expect(emailLabel).toHaveAttribute('for', 'email');
-      expect(passwordLabel).toHaveAttribute('for', 'password');
-    });
-  });
-
-  describe('Keyboard Navigation', () => {
-    it('should support tab navigation in logical order', async () => {
-      const user = userEvent.setup();
-      
-      renderWithProviders(
-        <TestWrapper appName="Keyboard Navigation App">
-          <PaceLoginPage appName="Keyboard Navigation App" />
-        </TestWrapper>
-      );
-
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-      const signInButton = screen.getByRole('button', { name: /sign in/i });
-
-      // Start with email input focused
-      emailInput.focus();
-      expect(emailInput).toHaveFocus();
-
-      // Tab to password input
-      await user.tab();
-      expect(passwordInput).toHaveFocus();
-
-      // Tab to sign in button (but it's disabled, so focus may not work)
-      await user.tab();
-      // Note: Disabled buttons are not focusable, so we just verify the button exists
-      expect(signInButton).toBeInTheDocument();
-
-      // Tab should cycle back to email input
-      await user.tab();
-      expect(emailInput).toHaveFocus();
-    });
-
-    it('should handle reverse keyboard navigation elements', async () => {
-      const user = userEvent.setup();
-      
-      renderWithProviders(
-        <TestWrapper appName="Reverse Navigation App">
-          <PaceLoginPage appName="Reverse Navigation App" />
-        </TestWrapper>
-      );
-
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-      const signInButton = screen.getByRole('button', { name: /sign in/i });
-
-      // Test that all elements are present and can be focused
-      emailInput.focus();
-      expect(emailInput).toHaveFocus();
-
-      passwordInput.focus();
-      expect(passwordInput).toHaveFocus();
-
-      // Test that shift+tab keyboard events don't cause errors
-      await user.keyboard('{Shift>}{Tab}{/Shift}');
-      
-      // Test that elements remain accessible and focusable
-      expect(emailInput).toBeInTheDocument();
-      expect(passwordInput).toBeInTheDocument();
-      expect(signInButton).toBeInTheDocument();
-      
-      // Verify we can still focus elements manually
-      emailInput.focus();
-      expect(emailInput).toHaveFocus();
-    });
-
-    it('should support enter key for form submission', async () => {
-      const user = userEvent.setup();
-      
-      renderWithProviders(
-        <TestWrapper appName="Enter Key App">
-          <PaceLoginPage appName="Enter Key App" />
-        </TestWrapper>
-      );
-
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-
-      // Fill out the form
-      await user.type(emailInput, 'test@example.com');
-      await user.type(passwordInput, 'password123');
-
-      // Press enter on password input should submit the form
-      await user.keyboard('{Enter}');
-
-      await waitFor(() => {
-        expect(mockSupabaseClient.auth.signInWithPassword).toHaveBeenCalled();
-      });
-    });
-  });
-
-  describe('Screen Reader Support', () => {
-    it('should have proper ARIA labels and descriptions', () => {
-      renderWithProviders(
-        <TestWrapper appName="ARIA App">
-          <PaceLoginPage appName="ARIA App" />
-        </TestWrapper>
-      );
-
-      // Check for proper heading structure
-      const heading = screen.getByRole('heading', { level: 3 });
-      expect(heading).toBeInTheDocument();
-      expect(heading).toHaveTextContent('Sign in to ARIA App');
-
-      // Check for descriptive text
-      const description = screen.getByText('Enter your credentials to continue.');
-      expect(description).toBeInTheDocument();
-
-      // Check input labels
-      const emailInput = screen.getByLabelText('Email');
-      const passwordInput = screen.getByLabelText('Password');
-      expect(emailInput).toBeInTheDocument();
-      expect(passwordInput).toBeInTheDocument();
-    });
-
-    it('should announce loading state to screen readers', async () => {
-      const user = userEvent.setup();
-      
-      // Mock a slow sign-in response
-      mockSupabaseClient.auth.signInWithPassword.mockImplementation(() => 
-        new Promise(resolve => {
-          setTimeout(() => {
-            resolve({ data: { user: null, session: null }, error: null });
-          }, 100);
-        })
-      );
-
-      renderWithProviders(
-        <TestWrapper appName="Loading Announcement App">
-          <PaceLoginPage appName="Loading Announcement App" />
-        </TestWrapper>
-      );
-
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-      const signInButton = screen.getByRole('button', { name: /sign in/i });
-
-      // Fill out the form
-      await user.type(emailInput, 'test@example.com');
-      await user.type(passwordInput, 'password123');
-      await user.click(signInButton);
-
-      // Check that sign-in was called
-      await waitFor(() => {
-        expect(mockSupabaseClient.auth.signInWithPassword).toHaveBeenCalled();
-      });
-
-      // Button should remain present
-      expect(signInButton).toBeInTheDocument();
-    });
-
-    it('should announce error messages to screen readers', async () => {
-      const user = userEvent.setup();
-      
-      // Mock an error response
-      mockSupabaseClient.auth.signInWithPassword.mockResolvedValue({
-        data: { user: null, session: null },
-        error: { message: 'Invalid credentials' },
-      });
-
-      renderWithProviders(
-        <TestWrapper appName="Error Announcement App">
-          <PaceLoginPage appName="Error Announcement App" />
-        </TestWrapper>
-      );
-
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-      const signInButton = screen.getByRole('button', { name: /sign in/i });
-
-      // Fill out the form and submit
-      await user.type(emailInput, 'test@example.com');
-      await user.type(passwordInput, 'wrongpassword');
-      await user.click(signInButton);
-
-      // Error should be announced
-      await waitFor(() => {
-        expect(mockSupabaseClient.auth.signInWithPassword).toHaveBeenCalled();
-      });
-    });
-  });
-
-  describe('Focus Management', () => {
-    it('should maintain focus within the form', async () => {
-      const user = userEvent.setup();
-      
-      renderWithProviders(
-        <TestWrapper appName="Focus Management App">
-          <PaceLoginPage appName="Focus Management App" />
-        </TestWrapper>
-      );
-
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-      const signInButton = screen.getByRole('button', { name: /sign in/i });
-
-      // Start with email input
-      emailInput.focus();
-      expect(emailInput).toHaveFocus();
-
-      // Tab through form elements
-      await user.tab();
-      expect(passwordInput).toHaveFocus();
-
-      await user.tab();
-      // Note: Disabled button may not be focusable
-      expect(signInButton).toBeInTheDocument();
-
-      // Tab again should cycle back to email input
-      await user.tab();
-      expect(emailInput).toHaveFocus();
-    });
-
-    it('should restore focus after error dismissal', async () => {
-      const user = userEvent.setup();
-      
-      // Mock an error response
-      mockSupabaseClient.auth.signInWithPassword.mockResolvedValue({
-        data: { user: null, session: null },
-        error: { message: 'Invalid credentials' },
-      });
-
-      renderWithProviders(
-        <TestWrapper appName="Focus Restoration App">
-          <PaceLoginPage appName="Focus Restoration App" />
-        </TestWrapper>
-      );
-
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-      const signInButton = screen.getByRole('button', { name: /sign in/i });
-
-      // Fill out the form and submit
-      await user.type(emailInput, 'test@example.com');
-      await user.type(passwordInput, 'wrongpassword');
-      await user.click(signInButton);
-
-      // Wait for error to be processed
-      await waitFor(() => {
-        expect(mockSupabaseClient.auth.signInWithPassword).toHaveBeenCalled();
-      });
-
-      // Focus should be maintained on the form
-      expect(emailInput).toBeInTheDocument();
-      expect(passwordInput).toBeInTheDocument();
-      expect(signInButton).toBeInTheDocument();
-    });
-  });
-
-  describe('Responsive Design Accessibility', () => {
-    it('should be accessible on different screen sizes', async () => {
-      // Set mobile viewport
-      Object.defineProperty(window, 'innerWidth', {
-        writable: true,
-        configurable: true,
-        value: 375,
-      });
-
-      const { container } = renderWithProviders(
-        <TestWrapper appName="Mobile Accessibility App">
-          <PaceLoginPage appName="Mobile Accessibility App" />
-        </TestWrapper>
-      );
-
-      // Test with axe-core, excluding heading order for demo purposes
-      const results = await axe(container, {
-        rules: {
-          'heading-order': { enabled: false }, // Disable for demo app structure
-          'landmark-main-is-top-level': { enabled: false }, // Disable for test wrapper structure
-          'landmark-no-duplicate-main': { enabled: false }, // Disable for test wrapper structure
-        },
-      });
-      expect(results).toHaveNoViolations();
-    });
-
-    it('should have proper touch targets on mobile', () => {
-      // Set mobile viewport
-      Object.defineProperty(window, 'innerWidth', {
-        writable: true,
-        configurable: true,
-        value: 375,
-      });
-
-      renderWithProviders(
-        <TestWrapper appName="Touch Targets App">
-          <PaceLoginPage appName="Touch Targets App" />
-        </TestWrapper>
-      );
-
-      const signInButton = screen.getByRole('button', { name: /sign in/i });
-      const buttonRect = signInButton.getBoundingClientRect();
-
-      // Touch targets should be at least 44x44 pixels
-      // Note: In test environment, getBoundingClientRect may return 0
-      // This is a structural test to ensure the button exists
-      expect(signInButton).toBeInTheDocument();
-      expect(signInButton).toHaveClass('h-9'); // Check for height class
-    });
-  });
-
-  describe('Internationalization', () => {
-    it('should support RTL languages', async () => {
-      // Set RTL direction
-      document.documentElement.dir = 'rtl';
-
-      const { container } = renderWithProviders(
-        <TestWrapper appName="RTL App">
-          <PaceLoginPage appName="RTL App" />
-        </TestWrapper>
-      );
-
-      const results = await axe(container, {
-        rules: {
-          'heading-order': { enabled: false }, // Disable for demo app structure
-          'landmark-main-is-top-level': { enabled: false }, // Disable for test wrapper structure
-          'landmark-no-duplicate-main': { enabled: false }, // Disable for test wrapper structure
-        },
-      });
-      expect(results).toHaveNoViolations();
-
-      // Reset document direction
-      document.documentElement.dir = 'ltr';
-    });
-
-    it('should have proper language attributes', () => {
-      // Set language
-      document.documentElement.lang = 'es';
-
-      renderWithProviders(
-        <TestWrapper appName="Language App">
-          <PaceLoginPage appName="Language App" />
-        </TestWrapper>
-      );
-
-      // Form should inherit language from document
-      const form = screen.getByTestId('login-form');
-      expect(form).toBeInTheDocument();
-
-      // Reset language
-      document.documentElement.lang = 'en';
-    });
-  });
-});