@jmruthers/pace-core 0.2.4

package/src/components/LoginForm/LoginForm.tsx

@@ -0,0 +1,273 @@
+/**
+ * @file LoginForm Component
+ * @package @jmruthers/pace-core
+ * @module Components/LoginForm
+ * @since 0.1.0
+ *
+ * A comprehensive login form component with built-in validation, error handling,
+ * and loading states for user authentication.
+ *
+ * Features:
+ * - Email and password validation
+ * - Loading states with disabled form
+ * - Error handling and display
+ * - Customizable branding and messaging
+ * - Sign-up link integration
+ * - Performance optimized with React.memo
+ * - Accessibility compliant
+ * - Responsive design
+ * - Form validation
+ * - Success and error callbacks
+ *
+ * @example
+ * ```tsx
+ * // Basic login form
+ * <LoginForm
+ *   onSignIn={async (data) => {
+ *     await signIn(data.email, data.password);
+ *   }}
+ *   onSuccess={() => navigate('/dashboard')}
+ *   onError={(error) => console.error('Login failed:', error)}
+ * />
+ * 
+ * // Login form with custom branding
+ * <LoginForm
+ *   appName="My Application"
+ *   title="Welcome Back"
+ *   subtitle="Please sign in to access your account"
+ *   onSignIn={handleSignIn}
+ *   onSuccess={handleSuccess}
+ *   onError={handleError}
+ * />
+ * 
+ * // Login form with sign-up integration
+ * <LoginForm
+ *   appName="My App"
+ *   showSignUp={true}
+ *   onSignUp={() => navigate('/signup')}
+ *   onSignIn={handleSignIn}
+ *   isLoading={isAuthenticating}
+ * />
+ * 
+ * // Login form with custom error handling
+ * <LoginForm
+ *   onSignIn={async (data) => {
+ *     try {
+ *       const result = await authService.signIn(data);
+ *       if (result.success) {
+ *         onSuccess();
+ *       } else {
+ *         throw new Error(result.error);
+ *       }
+ *     } catch (error) {
+ *       onError(error);
+ *     }
+ *   }}
+ *   onSuccess={() => {
+ *     toast.success('Successfully signed in!');
+ *     navigate('/dashboard');
+ *   }}
+ *   onError={(error) => {
+ *     toast.error(`Sign in failed: ${error.message}`);
+ *   }}
+ * />
+ * ```
+ *
+ * @accessibility
+ * - WCAG 2.1 AA compliant
+ * - Proper form labels and associations
+ * - Screen reader friendly error messages
+ * - Keyboard navigation support
+ * - Focus management
+ * - High contrast support
+ * - Clear error identification
+ *
+ * @performance
+ * - React.memo for efficient re-rendering
+ * - useCallback for stable event handlers
+ * - useMemo for computed values
+ * - Minimal re-renders
+ *
+ * @dependencies
+ * - React 18+ - Hooks and memo
+ * - Button component
+ * - Input component
+ * - Label component
+ * - Card components
+ * - Alert component
+ * - Tailwind CSS - Styling
+ */
+
+import React, { useState, useCallback, useMemo } from 'react';
+import { Button } from '../Button/Button';
+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';
+
+export interface LoginFormProps {
+  /** Callback invoked when the form is submitted */
+  onSignIn: (data: { email: string; password: string }) => Promise<void>;
+  /** Callback invoked on successful sign-in */
+  onSuccess?: () => void;
+  /** Callback invoked if sign-in fails */
+  onError?: (error: Error) => void;
+  /** Show loading spinner and disable form while true */
+  isLoading?: boolean;
+  /** Application name for display in the form */
+  appName?: string;
+  /** Custom title for the form */
+  title?: string;
+  /** Custom subtitle for the form */
+  subtitle?: string;
+  /** Show a sign-up link or button */
+  showSignUp?: boolean;
+  /** Optional callback for sign-up button */
+  onSignUp?: () => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * LoginForm component that provides a ready-to-use authentication form for user sign-in.
+ * It supports validation, loading state, error handling, and can be customized via props.
+ * Now includes performance optimizations and onSignUp support.
+ * 
+ * @param props - Login form configuration and handlers
+ * @returns JSX.Element - The rendered login form
+ * 
+ * @example
+ * ```tsx
+ * <LoginForm
+ *   onSignIn={handleSignIn}
+ *   onSuccess={() => navigate('/dashboard')}
+ *   onError={(error) => toast.error(error.message)}
+ *   isLoading={isAuthenticating}
+ * />
+ * ```
+ */
+export const LoginForm = React.memo<LoginFormProps>(({
+  onSignIn,
+  onSuccess,
+  onError,
+  isLoading = false,
+  appName,
+  title,
+  subtitle,
+  showSignUp = false,
+  onSignUp,
+  className
+}) => {
+  const [formData, setFormData] = useState({ email: '', password: '' });
+  const [error, setError] = useState<string | null>(null);
+
+  // Memoized validation state
+  const isFormValid = useMemo(() => {
+    return formData.email.length > 0 && formData.password.length > 0;
+  }, [formData.email, formData.password]);
+
+  // Memoized handlers
+  const handleEmailChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData(prev => ({ ...prev, email: e.target.value }));
+  }, []);
+
+  const handlePasswordChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData(prev => ({ ...prev, password: e.target.value }));
+  }, []);
+
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    if (!isFormValid || isLoading) return;
+    try {
+      await onSignIn(formData);
+      onSuccess?.();
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Sign in failed';
+      setError(errorMessage);
+      onError?.(err instanceof Error ? err : new Error(errorMessage));
+    }
+  }, [formData, isFormValid, isLoading, onSignIn, onSuccess, onError]);
+
+  const handleSignUpClick = useCallback(() => {
+    onSignUp?.();
+  }, [onSignUp]);
+
+  const displayTitle = useMemo(() => title || (appName ? `Sign in to ${appName}` : 'Sign In'), [title, appName]);
+  const displaySubtitle = useMemo(() => subtitle || 'Enter your credentials to continue.', [subtitle]);
+
+  return (
+    <Card className={cn('w-full max-w-md mx-auto', className)}>
+            <form onSubmit={handleSubmit} data-testid="login-form">
+      <CardHeader className="space-y-1">
+        <CardTitle className="text-2xl text-center">{displayTitle}</CardTitle>
+        <CardDescription className="text-center">
+          {displaySubtitle}
+        </CardDescription>
+      </CardHeader>
+
+        <CardContent className="space-y-4">
+          {error && (
+            <Alert variant="destructive">
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+         
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="Enter your email"
+              value={formData.email}
+              onChange={handleEmailChange}
+              required
+              disabled={isLoading}
+            />
+         
+         
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              placeholder="Enter your password"
+              value={formData.password}
+              onChange={handlePasswordChange}
+              required
+              disabled={isLoading}
+            />
+  
+        </CardContent>
+        <CardFooter className="flex flex-col space-y-4">
+          <Button 
+            type="submit" 
+            className="w-full" 
+            disabled={isLoading || !isFormValid}
+          >
+            {isLoading ? 'Signing in...' : 'Sign In'}
+          </Button>
+          {showSignUp && (
+            onSignUp ? (
+              <div className="text-sm text-center text-muted-foreground">
+                <button
+                  type="button"
+                  onClick={handleSignUpClick}
+                  className="text-primary hover:underline"
+                >
+                  Don't have an account? Sign up
+                </button>
+              </div>
+            ) : (
+              <p className="text-center text-muted-foreground">
+                Don't have an account?{' '}
+                <a href="/signup" className="text-primary hover:underline">
+                  Sign up
+                </a>
+              </p>
+            )
+          )}
+        </CardFooter>
+      </form>
+    </Card>
+  );
+});

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

@@ -0,0 +1,201 @@
+import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { LoginForm } from '../LoginForm';
+import { renderWithProviders } from '../../../__tests__/shared';
+
+expect.extend(toHaveNoViolations);
+
+describe('LoginForm Accessibility', () => {
+  const user = userEvent.setup();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should have no accessibility violations', async () => {
+    const { container } = renderWithProviders(<LoginForm onSignIn={async () => {}} />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('renders with form for accessibility', () => {
+      renderWithProviders(<LoginForm onSignIn={async () => {}} />);
+    expect(screen.getByTestId('login-form')).toBeInTheDocument();
+  });
+
+  it('has properly labeled form controls', () => {
+      renderWithProviders(<LoginForm onSignIn={async () => {}} />);
+    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
+  });
+
+  it('email and password fields are required', () => {
+      renderWithProviders(<LoginForm onSignIn={async () => {}} />);
+    expect(screen.getByLabelText(/email/i)).toBeRequired();
+    expect(screen.getByLabelText(/password/i)).toBeRequired();
+  });
+
+  it('should have proper tab order and keyboard navigation', async () => {
+      renderWithProviders(<LoginForm onSignIn={async () => {}} />);
+    const emailInput = screen.getByLabelText(/email/i);
+    const passwordInput = screen.getByLabelText(/password/i);
+    const submitButton = screen.getByRole('button', { name: /sign in/i });
+
+    // Fill in the form so the submit button becomes enabled
+    await user.type(emailInput, 'test@example.com');
+    await user.type(passwordInput, 'password123');
+
+    // Focus the email field before tabbing
+    emailInput.focus();
+    expect(emailInput).toHaveFocus();
+    await user.tab();
+    expect(passwordInput).toHaveFocus();
+    await user.tab();
+    expect(submitButton).toHaveFocus();
+  });
+
+  it('should show error message with role alert on sign-in failure', async () => {
+    const errorMsg = 'Invalid credentials';
+    const onSignIn = vi.fn().mockRejectedValue(new Error(errorMsg));
+      renderWithProviders(<LoginForm onSignIn={onSignIn} />);
+    const emailInput = screen.getByLabelText(/email/i);
+    const passwordInput = screen.getByLabelText(/password/i);
+    const submitButton = screen.getByRole('button', { name: /sign in/i });
+
+    await user.type(emailInput, 'user@example.com');
+    await user.type(passwordInput, 'wrongpassword');
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      expect(alert).toHaveTextContent(errorMsg);
+    });
+  });
+
+  it('should disable inputs and button when loading', () => {
+      renderWithProviders(<LoginForm onSignIn={async () => {}} isLoading />);
+    expect(screen.getByLabelText(/email/i)).toBeDisabled();
+    expect(screen.getByLabelText(/password/i)).toBeDisabled();
+    expect(screen.getByRole('button', { name: /signing in/i })).toBeDisabled();
+  });
+
+  it('should render sign-up button and be accessible if showSignUp and onSignUp provided', async () => {
+    const onSignUp = vi.fn();
+      renderWithProviders(<LoginForm onSignIn={async () => {}} showSignUp onSignUp={onSignUp} />);
+    const signUpButton = screen.getByRole('button', { name: /sign up/i });
+    expect(signUpButton).toBeInTheDocument();
+    await user.click(signUpButton);
+    expect(onSignUp).toHaveBeenCalled();
+  });
+
+  it('should render sign-up link if showSignUp is true and no onSignUp', () => {
+      renderWithProviders(<LoginForm onSignIn={async () => {}} showSignUp />);
+    const signUpLink = screen.getByRole('link', { name: /sign up/i });
+    expect(signUpLink).toBeInTheDocument();
+    expect(signUpLink).toHaveAttribute('href', '/signup');
+  });
+
+  it('should have accessible title and subtitle', () => {
+      renderWithProviders(<LoginForm onSignIn={async () => {}} title="Custom Title" subtitle="Custom Subtitle" />);
+    expect(screen.getByText('Custom Title')).toBeInTheDocument();
+    expect(screen.getByText('Custom Subtitle')).toBeInTheDocument();
+  });
+describe('LoginForm Error Handling', () => {
+  const user = userEvent.setup();
+  let restoreConsole: (() => void) | null = null;
+
+  beforeEach(() => {
+    restoreConsole = errorTestingUtils.suppressConsoleErrors();
+  });
+
+  afterEach(() => {
+    if (restoreConsole) {
+      restoreConsole();
+    }
+  });
+
+  it('should handle component errors gracefully', () => {
+    const ErrorComponent = () => {
+      throw new Error('LoginForm component error');
+    };
+
+      renderWithProviders(
+      <TestErrorBoundary>
+        <ErrorComponent />
+      </TestErrorBoundary>
+    );
+
+    expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    expect(screen.getByText('Error: LoginForm component error')).toBeInTheDocument();
+  });
+
+  it('should handle async errors', async () => {
+    const AsyncErrorComponent = ({ shouldFail }: { shouldFail: boolean }) => {
+      const [error, setError] = React.useState<Error | null>(null);
+
+      React.useEffect(() => {
+        if (shouldFail) {
+          setError(new Error('Async error'));
+        }
+      }, [shouldFail]);
+
+      if (error) {
+        throw error;
+      }
+
+      return <div>Async component</div>;
+    };
+
+      renderWithProviders(
+      <TestErrorBoundary>
+        <AsyncErrorComponent shouldFail={true} />
+      </TestErrorBoundary>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    });
+  });
+
+  it('should handle user interaction errors', async () => {
+    const ErrorComponent = errorTestingUtils.createErrorThrowingComponent(
+      'LoginForm interaction error',
+      'click'
+    );
+
+      renderWithProviders(
+      <TestErrorBoundary>
+        <ErrorComponent />
+      </TestErrorBoundary>
+    );
+
+    await user.click(screen.getByTestId('error-button'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-display')).toBeInTheDocument();
+    });
+  });
+
+  it('should recover from errors when props change', async () => {
+    const TestComponent = ({ shouldError }: { shouldError: boolean }) => {
+      if (shouldError) {
+        throw new Error('LoginForm prop error');
+      }
+      return <div>Normal content</div>;
+    };
+
+    await errorTestingUtils.testErrorRecovery(
+      TestComponent,
+      { shouldError: true },
+      { shouldError: false }
+    );
+
+    expect(screen.getByText('Normal content')).toBeInTheDocument();
+  });
+});
+}); 

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

@@ -0,0 +1,119 @@
+import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
+import { userEvent } from '@testing-library/user-event';
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { LoginForm } from '../LoginForm';
+import { renderWithProviders } from '../../../__tests__/shared';
+
+describe('LoginForm Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders without crashing', () => {
+      renderWithProviders(<LoginForm onSignIn={async () => {}} />);
+    expect(screen.getByTestId('login-form')).toBeInTheDocument();
+  });
+
+  it('renders email and password inputs', () => {
+      renderWithProviders(<LoginForm onSignIn={async () => {}} />);
+    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
+  });
+
+  // Add more unit tests as needed for props, events, edge cases
+describe('LoginForm Error Handling', () => {
+  const user = userEvent.setup();
+  let restoreConsole: (() => void) | null = null;
+
+  beforeEach(() => {
+    restoreConsole = errorTestingUtils.suppressConsoleErrors();
+  });
+
+  afterEach(() => {
+    if (restoreConsole) {
+      restoreConsole();
+    }
+  });
+
+  it('should handle component errors gracefully', () => {
+    const ErrorComponent = () => {
+      throw new Error('LoginForm component error');
+    };
+
+      renderWithProviders(
+      <TestErrorBoundary>
+        <ErrorComponent />
+      </TestErrorBoundary>
+    );
+
+    expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    expect(screen.getByText('Error: LoginForm component error')).toBeInTheDocument();
+  });
+
+  it('should handle async errors', async () => {
+    const AsyncErrorComponent = ({ shouldFail }: { shouldFail: boolean }) => {
+      const [error, setError] = React.useState<Error | null>(null);
+
+      React.useEffect(() => {
+        if (shouldFail) {
+          setError(new Error('Async error'));
+        }
+      }, [shouldFail]);
+
+      if (error) {
+        throw error;
+      }
+
+      return <div>Async component</div>;
+    };
+
+      renderWithProviders(
+      <TestErrorBoundary>
+        <AsyncErrorComponent shouldFail={true} />
+      </TestErrorBoundary>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    });
+  });
+
+  it('should handle user interaction errors', async () => {
+    const ErrorComponent = errorTestingUtils.createErrorThrowingComponent(
+      'LoginForm interaction error',
+      'click'
+    );
+
+      renderWithProviders(
+      <TestErrorBoundary>
+        <ErrorComponent />
+      </TestErrorBoundary>
+    );
+
+    await user.click(screen.getByTestId('error-button'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-display')).toBeInTheDocument();
+    });
+  });
+
+  it('should recover from errors when props change', async () => {
+    const TestComponent = ({ shouldError }: { shouldError: boolean }) => {
+      if (shouldError) {
+        throw new Error('LoginForm prop error');
+      }
+      return <div>Normal content</div>;
+    };
+
+    await errorTestingUtils.testErrorRecovery(
+      TestComponent,
+      { shouldError: true },
+      { shouldError: false }
+    );
+
+    expect(screen.getByText('Normal content')).toBeInTheDocument();
+  });
+});
+}); 

package/src/components/LoginForm/index.ts

@@ -0,0 +1,3 @@
+
+export { LoginForm } from './LoginForm';
+export type { LoginFormProps } from './LoginForm';