@jmruthers/pace-core 0.5.181 → 0.5.182

package/src/components/PasswordReset/PasswordResetForm.tsx

@@ -1,201 +0,0 @@
-/**
- * @file Password Reset Form Component
- * @package @jmruthers/pace-core
- * @module Components/PasswordReset
- * @since 0.1.0
- *
- * A comprehensive password reset form component that handles email-based password recovery
- * with proper validation, loading states, and success feedback.
- *
- * Features:
- * - Email validation and submission
- * - Loading states with disabled form
- * - Success state with confirmation message
- * - Error handling and display
- * - Resend functionality
- * - Accessibility compliant
- * - Responsive design
- * - Integration with UnifiedAuthProvider
- * - Form validation
- * - Success and error callbacks
- *
- * @example
- * ```tsx
- * // Basic password reset form
- * <PasswordResetForm
- *   onSuccess={() => {
- *     toast.success('Password reset email sent!');
- *   }}
- *   onError={(error) => {
- *     toast.error(`Failed to send reset email: ${error.message}`);
- *   }}
- * />
- * 
- * // Password reset form with custom styling
- * <PasswordResetForm
- *   className="max-w-md mx-auto p-6 bg-main-50 rounded-lg shadow-md"
- *   onSuccess={() => {
- *     console.log('Reset email sent successfully');
- *     navigate('/check-email');
- *   }}
- *   onError={(error) => {
- *     console.error('Password reset failed:', error);
- *   }}
- * />
- * 
- * // Password reset form in a modal
- * <Modal isOpen={showResetForm} onClose={() => setShowResetForm(false)}>
- *   <ModalContent>
- *     <PasswordResetForm
- *       onSuccess={() => {
- *         setShowResetForm(false);
- *         toast.success('Check your email for reset instructions');
- *       }}
- *       onError={(error) => {
- *         toast.error(error.message);
- *       }}
- *     />
- *   </ModalContent>
- * </Modal>
- * ```
- *
- * @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
- * - Role="alert" for error announcements
- *
- * @dependencies
- * - React 18+ - Hooks and state
- * - UnifiedAuthProvider - Authentication context
- * - Button component
- * - Input component
- * - Label component
- * - Tailwind CSS - Styling
- */
-
-import React, { useState } from 'react';
-import { Button } from '../Button/Button';
-import { Input } from '../Input/Input';
-import { Label } from '../Label';
-import { cn } from '../../utils/core/cn';
-import { useUnifiedAuth } from '../../providers/UnifiedAuthProvider';
-
-export interface PasswordResetFormProps {
-  onSuccess?: () => void;
-  onError?: (error: Error) => void;
-  className?: string;
-}
-
-export function PasswordResetForm({
-  onSuccess,
-  onError,
-  className
-}: PasswordResetFormProps) {
-  const { resetPassword } = useUnifiedAuth();
-  const [email, setEmail] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [isSuccess, setIsSuccess] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (!email.trim()) {
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      const { error: resetError } = await resetPassword(email);
-      
-      if (resetError) {
-        const errorObj = new Error(resetError.message || 'Failed to send reset email');
-        setError(errorObj.message);
-        onError?.(errorObj);
-      } else {
-        setIsSuccess(true);
-        onSuccess?.();
-      }
-    } catch (err) {
-      const errorObj = err instanceof Error ? err : new Error('An unexpected error occurred');
-      setError(errorObj.message);
-      onError?.(errorObj);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleSendAnother = () => {
-    setIsSuccess(false);
-    setError(null);
-  };
-
-  if (isSuccess) {
-    return (
-      <div className={cn('', className)} role="form">
-        <div className="space-y-4 text-center">
-          <h2>Check your email</h2>
-          <p className="text-sec-600">
-            We have sent a password reset link to {email}
-          </p>
-          <Button 
-            variant="outline" 
-            onClick={handleSendAnother}
-            className="w-full"
-          >
-            Send another email
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn('', className)} role="form">
-      <div className="space-y-4">
-        <div className="space-y-2">
-          <h2>Reset Password</h2>
-          <p className="text-sec-600">
-            Enter your email address and we'll send you a reset link.
-          </p>
-        </div>
-
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="email">Email Address</Label>
-            <Input
-              id="email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="Enter your email"
-              required
-              disabled={isLoading}
-            />
-          </div>
-
-          {error && (
-            <div className="text-sm text-destructive" role="alert">
-              {error}
-            </div>
-          )}
-
-          <Button
-            type="submit"
-            className="w-full"
-            disabled={!email.trim() || isLoading}
-          >
-            {isLoading ? 'Sending...' : 'Send Reset Link'}
-          </Button>
-        </form>
-      </div>
-    </div>
-  );
-}

package/src/components/PasswordReset/index.ts

@@ -1,2 +0,0 @@
-export { PasswordChangeForm } from './PasswordChangeForm';
-export type { PasswordChangeFormProps, PasswordChangeFormValues } from './PasswordChangeForm';

package/src/components/ProtectedRoute/README.md

@@ -1,164 +0,0 @@
-# ProtectedRoute Component
-
-A route protection component that handles authentication and optional event selection without creating blocking issues.
-
-## Features
-
-- ✅ **Authentication checking** - Automatically redirects to login if user is not authenticated
-- ✅ **Session restoration** - Handles session restoration states automatically
-- ✅ **Event loading management** - Allows rendering during event loading (prevents UI blocking)
-- ✅ **Event selector visibility** - Allows rendering when events exist but none selected (so event selector in header is visible)
-- ✅ **Clear error states** - Shows helpful messages when no events are available
-- ✅ **Flexible configuration** - Optional event requirement, customizable fallbacks
-
-## Problem It Solves
-
-This component solves the **chicken-and-egg problem** where apps check for `selectedEvent` before rendering, which blocks the event selector dropdown (typically in `PaceAppLayout` header) from being visible. This creates a deadlock where users cannot select an event.
-
-**Before (Problem):**
-```tsx
-// ❌ This blocks rendering, preventing event selector from being visible
-function ProtectedRoute({ children }) {
-  const { selectedEvent } = useEvents();
-  
-  if (!selectedEvent) {
-    return <div>No event selected. Please select an event from the dropdown above.</div>;
-  }
-  
-  return <>{children}</>;
-}
-```
-
-**After (Solution):**
-```tsx
-// ✅ ProtectedRoute allows rendering when events exist but none selected
-// Event selector in header is now visible and usable
-import { ProtectedRoute } from '@jmruthers/pace-core';
-
-<Route element={<ProtectedRoute />}>
-  <Route path="/dashboard" element={<DashboardPage />} />
-</Route>
-```
-
-## Usage
-
-### Basic Usage
-
-```tsx
-import { ProtectedRoute } from '@jmruthers/pace-core';
-import { Routes, Route } from 'react-router-dom';
-
-function App() {
-  return (
-    <Routes>
-      <Route path="/login" element={<LoginPage />} />
-      <Route element={<ProtectedRoute />}>
-        <Route path="/dashboard" element={<DashboardPage />} />
-        <Route path="/events" element={<EventsPage />} />
-      </Route>
-    </Routes>
-  );
-}
-```
-
-### Without Event Requirement
-
-```tsx
-<Route element={<ProtectedRoute requireEvent={false} />}>
-  <Route path="/settings" element={<SettingsPage />} />
-</Route>
-```
-
-### Custom Fallbacks
-
-```tsx
-<Route element={
-  <ProtectedRoute
-    requireEvent={true}
-    loginPath="/login"
-    loadingFallback={<CustomLoader />}
-    noEventsFallback={
-      <div>
-        <h2>No Events Available</h2>
-        <p>Contact your administrator for access.</p>
-      </div>
-    }
-  />
-}>
-  <Route path="/dashboard" element={<DashboardPage />} />
-</Route>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `requireEvent` | `boolean` | `true` | Whether an event is required for routes inside this component |
-| `allowSuperAdminBypass` | `boolean` | `false` | Whether super admins can bypass event requirement (deprecated) |
-| `noEventsFallback` | `ReactNode` | - | Custom component to render when no events are available |
-| `loadingFallback` | `ReactNode` | - | Custom component to render while events are loading |
-| `loginPath` | `string` | `'/login'` | Login redirect path when user is not authenticated |
-
-## Behavior
-
-The component follows this logic flow:
-
-1. **Session Restoration** - Shows loader during session restoration
-2. **Authentication Check** - Redirects to login if not authenticated
-3. **Event Requirement Check** - If `requireEvent={false}`, allows rendering
-4. **Event Loading** - Allows rendering during event loading (prevents UI blocking)
-5. **No Events Available** - Shows error message if no events exist
-6. **Events Exist, None Selected** - **KEY FIX**: Allows rendering so event selector is visible
-7. **Event Selected** - Allows rendering normally
-
-## Integration with PaceAppLayout
-
-The `ProtectedRoute` component is designed to work seamlessly with `PaceAppLayout`, which contains the event selector dropdown in its header:
-
-```tsx
-<Route element={<ProtectedRoute />}>
-  <Route element={<PaceAppLayout appName="My App" />}>
-    <Route path="/" element={<DashboardPage />} />
-  </Route>
-</Route>
-```
-
-When events exist but none is selected, `ProtectedRoute` allows rendering, making the `PaceAppLayout` header (and its event selector) visible. Users can then:
-- See the event selector dropdown
-- Manually select an event
-- Or let auto-selection work when events finish loading
-
-## Migration from Custom ProtectedRoute
-
-If you have a custom `ProtectedRoute` that blocks rendering when no event is selected:
-
-**Before:**
-```tsx
-function ProtectedRoute({ children }) {
-  const { isAuthenticated } = useUnifiedAuth();
-  const { selectedEvent } = useEvents();
-  
-  if (!isAuthenticated) return <Navigate to="/login" />;
-  if (!selectedEvent) return <div>Please select an event</div>; // ❌ Blocks UI
-  
-  return <>{children}</>;
-}
-```
-
-**After:**
-```tsx
-import { ProtectedRoute } from '@jmruthers/pace-core';
-
-// Simply replace your custom component
-<Route element={<ProtectedRoute />}>
-  {/* Your routes */}
-</Route>
-```
-
-## Related Documentation
-
-- [Authentication Implementation Guide](../../../../docs/implementation-guides/authentication.md#protected-routes)
-- [Common Patterns](../../../../docs/best-practices/common-patterns.md#protected-routes)
-- [API Reference](../../../../docs/api-reference/components.md#protectedroute)
-- [Component Props Interface](../../../../docs/api/interfaces/ProtectedRouteProps.md)
-

package/src/components/PublicLayout/EventLogo.tsx

@@ -1,175 +0,0 @@
-/**
- * @file Event Logo Component
- * @package @jmruthers/pace-core
- * @module Components/PublicLayout
- * @since 1.0.0
- *
- * A context-aware component for displaying event logos with automatic fallback to event initials.
- * Automatically detects whether it's being used in a public or authenticated context and behaves
- * appropriately without triggering authentication context leakage.
- *
- * Features:
- * - Context-aware (works in both public and authenticated contexts)
- * - Automatic fallback to event initials
- * - Logo validation and error handling
- * - Multiple size options
- * - Responsive design
- * - Accessibility compliant
- * - TypeScript support
- *
- * @example
- * ```tsx
- * import { EventLogo } from '@jmruthers/pace-core';
- *
- * function EventHeader() {
- *   return (
- *     <EventLogo
- *       eventId={event.id}
- *       eventName={event.event_name}
- *       organisationId={event.organisation_id}
- *       size="lg"
- *       className="rounded-full"
- *     />
- *   );
- * }
- * ```
- *
- * @accessibility
- * - WCAG 2.1 AA compliant
- * - Proper alt text for images
- * - Screen reader friendly fallbacks
- * - High contrast support
- *
- * @dependencies
- * - React 18+ - Component framework
- * - FileDisplay component - Logo display and fallback handling
- * - Tailwind CSS - Styling
- */
-
-import React from 'react';
-import { FileDisplay } from '../FileDisplay/FileDisplay';
-import { FileCategory } from '../../types/file-reference';
-
-export interface EventLogoProps {
-  /** The event ID to fetch logo for */
-  eventId: string;
-  /** The event name for fallback text generation */
-  eventName: string;
-  /** The organisation ID for storage path */
-  organisationId: string;
-  /** Logo size variant */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-  /** Custom CSS classes */
-  className?: string;
-  /** Whether to show fallback text when no logo is available */
-  showFallback?: boolean;
-  /** Custom fallback text generator */
-  generateFallbackText?: (eventName: string) => string;
-  /** Whether to validate image existence (deprecated - FileDisplay handles this) */
-  validateImage?: boolean;
-  /** Custom loading component */
-  loadingComponent?: React.ComponentType;
-  /** Custom error component */
-  errorComponent?: React.ComponentType<{ error: Error }>;
-}
-
-/**
- * Default fallback text generator
- */
-function defaultGenerateFallbackText(eventName: string): string {
-  if (!eventName) return 'EV';
-  
-  return eventName
-    .split(' ')
-    .map(word => word.charAt(0).toUpperCase())
-    .join('')
-    .substring(0, 3); // Max 3 characters
-}
-
-/**
- * Component for displaying event logos with fallback to initials
- * 
- * This component is context-aware and automatically detects whether it's being used
- * in a public or authenticated context. It uses FileDisplay internally to fetch and
- * display event logos from storage, with automatic fallback to event initials if no
- * logo is available.
- * 
- * @param props - Logo configuration and styling
- * @returns React element with event logo or fallback
- */
-export function EventLogo({
-  eventId,
-  eventName,
-  organisationId,
-  size = 'md',
-  className = '',
-  showFallback = true,
-  generateFallbackText = defaultGenerateFallbackText,
-  validateImage = true, // Deprecated but kept for backward compatibility
-  loadingComponent: LoadingComponent,
-  errorComponent: ErrorComponent
-}: EventLogoProps) {
-  // Adapt generateFallbackText to FileDisplay's signature
-  // FileDisplay expects (fileName?: string) => string, but we have (eventName: string) => string
-  const adaptedGenerateFallbackText = React.useCallback(
-    (fileName?: string) => {
-      // Use eventName if available, otherwise fall back to fileName
-      return generateFallbackText(eventName || fileName || '');
-    },
-    [eventName, generateFallbackText]
-  );
-
-  // Adapt error component to FileDisplay's signature
-  // FileDisplay expects { error: Error | string | null; retry?: () => void }
-  const adaptedErrorComponent = ErrorComponent
-    ? React.useCallback(
-        ({ error }: { error: Error | string | null; retry?: () => void }) => {
-          const errorObj = error instanceof Error ? error : new Error(String(error || 'Unknown error'));
-          return <ErrorComponent error={errorObj} />;
-        },
-        [ErrorComponent]
-      )
-    : undefined;
-
-  return (
-    <FileDisplay
-      table_name="event"
-      record_id={eventId}
-      organisation_id={organisationId}
-      category={FileCategory.EVENT_LOGOS}
-      displayOnly={true}
-      showFallback={showFallback}
-      fallbackSize={size}
-      className={className}
-      generateFallbackText={adaptedGenerateFallbackText}
-      loadingComponent={LoadingComponent}
-      errorComponent={adaptedErrorComponent}
-    />
-  );
-}
-
-/**
- * Compact event logo for small spaces
- */
-export function EventLogoCompact(props: EventLogoProps) {
-  return (
-    <EventLogo
-      {...props}
-      size="sm"
-      className={`${props.className || ''} rounded-sm`}
-    />
-  );
-}
-
-/**
- * Large event logo for prominent display
- */
-export function EventLogoLarge(props: EventLogoProps) {
-  return (
-    <EventLogo
-      {...props}
-      size="xl"
-      className={`${props.className || ''} rounded-lg`}
-    />
-  );
-}