@jmruthers/pace-core 0.5.136 → 0.5.139

package/src/components/PasswordReset/PasswordResetForm.tsx

@@ -0,0 +1,201 @@
+/**
+ * @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/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/PublicLayout/PublicPageDebugger.tsx

@@ -0,0 +1,104 @@
+/**
+ * @file Public Page Debugger
+ * @package @jmruthers/pace-core
+ * @module Components/PublicLayout
+ * @since 1.0.0
+ *
+ * A debugging component that helps identify why authentication context
+ * is being triggered in public pages.
+ */
+
+import React, { useEffect } from 'react';
+import { usePublicPageContext } from './PublicPageProvider';
+
+export interface PublicPageDebuggerProps {
+  /** Whether to enable debugging */
+  enabled?: boolean;
+  /** Custom label for this debugger instance */
+  label?: string;
+}
+
+/**
+ * Debugger component that logs context information
+ * 
+ * This component helps identify why authentication context
+ * is being triggered in public pages.
+ */
+export function PublicPageDebugger({ enabled = true, label = 'PublicPage' }: PublicPageDebuggerProps) {
+  useEffect(() => {
+    if (!enabled) return;
+
+    console.log(`[${label}] Component mounted`);
+    
+    // Check if we're in a public page context
+    try {
+      // This will throw if we're not in PublicPageProvider
+      const { isPublicPage } = usePublicPageContext();
+      console.log(`[${label}] Public page context detected:`, isPublicPage);
+    } catch (error) {
+      console.warn(`[${label}] Not in PublicPageProvider context:`, error instanceof Error ? error.message : String(error));
+    }
+
+    // Check for authentication context
+    try {
+      // This will throw if we're not in UnifiedAuthProvider
+      const { isAuthenticated } = require('../../providers/UnifiedAuthProvider').useUnifiedAuth();
+      console.warn(`[${label}] AUTHENTICATION CONTEXT DETECTED! This should not happen in public pages.`);
+      console.warn(`[${label}] isAuthenticated:`, isAuthenticated);
+    } catch (error) {
+      console.log(`[${label}] No authentication context detected (good for public pages)`);
+    }
+
+    // Check for organisation context
+    try {
+      // This will throw if we're not in OrganisationProvider
+      const { selectedOrganisation } = require('../../providers/OrganisationProvider').useOrganisations();
+      console.warn(`[${label}] ORGANISATION CONTEXT DETECTED! This should not happen in public pages.`);
+      console.warn(`[${label}] selectedOrganisation:`, selectedOrganisation);
+    } catch (error) {
+      console.log(`[${label}] No organisation context detected (good for public pages)`);
+    }
+
+    // Check for event context
+    try {
+      // This will throw if we're not in EventProvider
+      const { events } = require('../../providers/EventProvider').useEvents();
+      console.warn(`[${label}] EVENT CONTEXT DETECTED! This should not happen in public pages.`);
+      console.warn(`[${label}] events:`, events);
+    } catch (error) {
+      console.log(`[${label}] No event context detected (good for public pages)`);
+    }
+
+    // Check environment variables
+    const supabaseUrl = (import.meta as any).env?.VITE_SUPABASE_URL;
+    const supabaseKey = (import.meta as any).env?.VITE_SUPABASE_ANON_KEY;
+    
+    console.log(`[${label}] Environment variables:`, {
+      supabaseUrl: supabaseUrl ? 'Present' : 'Missing',
+      supabaseKey: supabaseKey ? 'Present' : 'Missing'
+    });
+
+    return () => {
+      console.log(`[${label}] Component unmounted`);
+    };
+  }, [enabled, label]);
+
+  if (!enabled) return null;
+
+  return (
+    <div style={{ 
+      position: 'fixed', 
+      top: 0, 
+      right: 0, 
+      background: 'rgba(0,0,0,0.8)', 
+      color: 'white', 
+      padding: '8px', 
+      fontSize: '12px',
+      zIndex: 9999,
+      fontFamily: 'monospace'
+    }}>
+      <div>Public Page Debugger</div>
+      <div>Check console for context analysis</div>
+    </div>
+  );
+}

package/src/components/PublicLayout/PublicPageDiagnostic.tsx

@@ -0,0 +1,162 @@
+/**
+ * @file Public Page Diagnostic Component
+ * @package @jmruthers/pace-core
+ * @module Components/PublicLayout
+ * @since 1.0.0
+ *
+ * A diagnostic component that helps identify exactly where authentication
+ * context is being triggered in public pages.
+ */
+
+import React, { useEffect, useState } from 'react';
+import { usePublicPageContext } from './PublicPageProvider';
+
+export interface PublicPageDiagnosticProps {
+  /** Whether to enable diagnostics */
+  enabled?: boolean;
+  /** Custom label for this diagnostic instance */
+  label?: string;
+}
+
+/**
+ * Diagnostic component that identifies authentication context issues
+ * 
+ * This component will help you identify exactly where the problem is
+ * in your public page implementation.
+ */
+export function PublicPageDiagnostic({ enabled = true, label = 'PublicPage' }: PublicPageDiagnosticProps) {
+  const [diagnostics, setDiagnostics] = useState<{
+    hasPublicPageContext: boolean;
+    hasAuthContext: boolean;
+    hasOrgContext: boolean;
+    hasEventContext: boolean;
+    hasEnvironmentVars: boolean;
+    routeParams: any;
+  }>({
+    hasPublicPageContext: false,
+    hasAuthContext: false,
+    hasOrgContext: false,
+    hasEventContext: false,
+    hasEnvironmentVars: false,
+    routeParams: null
+  });
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const runDiagnostics = () => {
+      const newDiagnostics = {
+        hasPublicPageContext: false,
+        hasAuthContext: false,
+        hasOrgContext: false,
+        hasEventContext: false,
+        hasEnvironmentVars: false,
+        routeParams: null
+      };
+
+      // Check for PublicPageProvider context
+      try {
+        const { isPublicPage } = usePublicPageContext();
+        newDiagnostics.hasPublicPageContext = isPublicPage === true;
+      } catch (error) {
+        newDiagnostics.hasPublicPageContext = false;
+      }
+
+      // Check for authentication context
+      try {
+        const { isAuthenticated } = require('../../providers/UnifiedAuthProvider').useUnifiedAuth();
+        newDiagnostics.hasAuthContext = true;
+      } catch (error) {
+        newDiagnostics.hasAuthContext = false;
+      }
+
+      // Check for organisation context
+      try {
+        const { selectedOrganisation } = require('../../providers/OrganisationProvider').useOrganisations();
+        newDiagnostics.hasOrgContext = true;
+      } catch (error) {
+        newDiagnostics.hasOrgContext = false;
+      }
+
+      // Check for event context
+      try {
+        const { events } = require('../../providers/EventProvider').useEvents();
+        newDiagnostics.hasEventContext = true;
+      } catch (error) {
+        newDiagnostics.hasEventContext = false;
+      }
+
+      // Check environment variables
+      const supabaseUrl = (import.meta as any).env?.VITE_SUPABASE_URL;
+      const supabaseKey = (import.meta as any).env?.VITE_SUPABASE_ANON_KEY;
+      newDiagnostics.hasEnvironmentVars = !!(supabaseUrl && supabaseKey);
+
+      // Check route parameters
+      try {
+        const { useParams } = require('react-router-dom');
+        const params = useParams();
+        newDiagnostics.routeParams = params;
+      } catch (error) {
+        newDiagnostics.routeParams = null;
+      }
+
+      setDiagnostics(newDiagnostics);
+
+      // Log results
+      console.group(`🔍 [${label}] Public Page Diagnostics`);
+      console.log('✅ Public Page Context:', newDiagnostics.hasPublicPageContext ? 'PRESENT' : 'MISSING');
+      console.log('❌ Auth Context:', newDiagnostics.hasAuthContext ? 'PRESENT (BAD!)' : 'ABSENT (GOOD!)');
+      console.log('❌ Org Context:', newDiagnostics.hasOrgContext ? 'PRESENT (BAD!)' : 'ABSENT (GOOD!)');
+      console.log('❌ Event Context:', newDiagnostics.hasEventContext ? 'PRESENT (BAD!)' : 'ABSENT (GOOD!)');
+      console.log('✅ Environment Vars:', newDiagnostics.hasEnvironmentVars ? 'PRESENT' : 'MISSING');
+      console.log('✅ Route Params:', newDiagnostics.routeParams);
+      console.groupEnd();
+
+      // Provide specific guidance
+      if (newDiagnostics.hasAuthContext || newDiagnostics.hasOrgContext || newDiagnostics.hasEventContext) {
+        console.error(`🚨 [${label}] PROBLEM DETECTED: Public page is inside authentication context!`);
+        console.error('🔧 SOLUTION: Move public routes outside of UnifiedAuthProvider, OrganisationProvider, and EventProvider');
+        console.error('📖 See: packages/core/docs/emergency-public-pages-fix.md');
+      } else if (!newDiagnostics.hasPublicPageContext) {
+        console.warn(`⚠️ [${label}] WARNING: Not in PublicPageProvider context`);
+        console.warn('🔧 SOLUTION: Wrap your public page component in <PublicPageProvider>');
+      } else if (!newDiagnostics.hasEnvironmentVars) {
+        console.warn(`⚠️ [${label}] WARNING: Missing environment variables`);
+        console.warn('🔧 SOLUTION: Set VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY in your environment');
+      } else {
+        console.log(`✅ [${label}] All diagnostics passed! Public page should work correctly.`);
+      }
+    };
+
+    runDiagnostics();
+  }, [enabled, label]);
+
+  if (!enabled) return null;
+
+  return (
+    <div style={{ 
+      position: 'fixed', 
+      top: 0, 
+      left: 0, 
+      background: 'rgba(0,0,0,0.9)', 
+      color: 'white', 
+      padding: '12px', 
+      fontSize: '11px',
+      zIndex: 9999,
+      fontFamily: 'monospace',
+      maxWidth: '300px',
+      borderRadius: '0 0 8px 0'
+    }}>
+      <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>🔍 Public Page Diagnostics</div>
+      <div>Public Context: {diagnostics.hasPublicPageContext ? '✅' : '❌'}</div>
+      <div>Auth Context: {diagnostics.hasAuthContext ? '❌ BAD' : '✅ GOOD'}</div>
+      <div>Org Context: {diagnostics.hasOrgContext ? '❌ BAD' : '✅ GOOD'}</div>
+      <div>Event Context: {diagnostics.hasEventContext ? '❌ BAD' : '✅ GOOD'}</div>
+      <div>Env Vars: {diagnostics.hasEnvironmentVars ? '✅' : '❌'}</div>
+      <div>Route Params: {diagnostics.routeParams ? '✅' : '❌'}</div>
+      <div style={{ marginTop: '8px', fontSize: '10px', opacity: 0.8 }}>
+        Check console for detailed analysis
+      </div>
+    </div>
+  );
+}

package/src/components/PublicLayout/__tests__/PublicPageFooter.test.tsx

@@ -12,7 +12,7 @@ import { PublicPageFooter } from '../PublicPageFooter';
 import type { Event } from '../../../types/unified';
 
 // Mock the cn utility
-vi.mock('../../../utils/cn', () => ({
+vi.mock('../../../utils/core/cn', () => ({
   cn: vi.fn((...classes) => classes.filter(Boolean).join(' '))
 }));
 

package/src/components/Select/Select.test.tsx

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

package/src/components/Select/Select.tsx

@@ -33,11 +33,13 @@ export interface SelectContextValue extends SelectState {
   actions: SelectActions;
   registerItem?: (value: string, text: string) => void;
   unregisterItem?: (value: string) => void;
+  direction?: 'up' | 'down';
 }
 
 export interface SelectProps extends Omit<React.HTMLAttributes<HTMLFormElement>, 'onChange' | 'onKeyDown' | 'onFocus' | 'onBlur'> {
   children: React.ReactNode;
   className?: string;
+  direction?: 'up' | 'down';
   // State props are in UseSelectStateProps (via & intersection)
 }
 
@@ -168,6 +170,7 @@ export const Select = React.forwardRef<HTMLFormElement, SelectProps & UseSelectS
   ({ 
     children,
     className,
+    direction = 'down',
     ...selectProps
   }, ref) => {
     const internalRef = React.useRef<HTMLFormElement>(null);
@@ -317,7 +320,8 @@ export const Select = React.forwardRef<HTMLFormElement, SelectProps & UseSelectS
       actions,
       registerItem,
       unregisterItem,
-    }), [state, actions, registerItem, unregisterItem]);
+      direction,
+    }), [state, actions, registerItem, unregisterItem, direction]);
 
     return (
       <form
@@ -341,7 +345,8 @@ Select.displayName = "Select";
 
 export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
   ({ children, className, variant = "outline", size = "default", asChild = false, ...props }, ref) => {
-    const { open, disabled, value, actions } = useSelectContext();
+    const { open, disabled, value, actions, direction = 'down' } = useSelectContext();
+    const opensUpward = direction === 'up';
 
     const handleClick = () => {
       actions.setOpen(!open);
@@ -377,7 +382,8 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
       className: cn(
         "!justify-between relative w-full",
         "[&_svg]:pointer-events-none",
-        open && "!rounded-b-none !border-b-0",
+        open && !opensUpward && "!rounded-b-none !border-b-0",
+        open && opensUpward && "!rounded-t-none !border-t-0",
         className
       ),
       style: {
@@ -438,7 +444,8 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
         className={cn(
           "!justify-between relative w-full",
           "[&_svg]:pointer-events-none",
-          open && "!rounded-b-none !border-b-0",
+          open && !opensUpward && "!rounded-b-none !border-b-0",
+          open && opensUpward && "!rounded-t-none !border-t-0",
           className
         )}
         style={{
@@ -493,10 +500,10 @@ export const SelectContent = React.forwardRef<HTMLUListElement, SelectContentPro
     className, 
     searchable = false,
     searchPlaceholder = "Search...",
-    maxHeight = "20rem",
+    maxHeight = "max(20rem, 50vh)",
     style
   }, ref) => {
-    const { open, actions } = useSelectContext();
+    const { open, actions, direction = 'down' } = useSelectContext();
     const { searchTerm, setSearchTerm, filteredChildren, searchInputRef } = useSelectSearch({
       children,
       searchable,
@@ -525,16 +532,21 @@ export const SelectContent = React.forwardRef<HTMLUListElement, SelectContentPro
       );
     }
 
+    const opensUpward = direction === 'up';
+    
     return (
       <ul
         ref={ref}
         className={cn(
-          "absolute z-[99999] w-full overflow-y-auto rounded-b-md border border-t-0 border-main-300 bg-main-50 shadow-lg",
+          "absolute z-[99999] w-full overflow-y-auto border border-main-300 bg-main-50 shadow-lg",
           "list-none p-0 m-0",
+          opensUpward 
+            ? "rounded-t-md border-b-0" 
+            : "rounded-b-md border-t-0",
           className
         )}
         style={{ 
-          top: '100%',
+          [opensUpward ? 'bottom' : 'top']: '100%',
           left: 0,
           right: 0,
           maxHeight,

package/src/components/Table/__tests__/Table.test.tsx

@@ -20,7 +20,7 @@ import {
 } from '../Table';
 
 // Mock the cn utility
-vi.mock('../../../utils/cn', () => ({
+vi.mock('../../../utils/core/cn', () => ({
   cn: vi.fn((...classes) => classes.filter(Boolean).join(' '))
 }));
 

package/src/components/index.ts

@@ -49,6 +49,9 @@ export type { LabelProps } from './Label';
 export { Alert, AlertTitle, AlertDescription } from './Alert';
 export { Avatar, AvatarImage, AvatarFallback } from './Avatar';
 
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeVariant } from './Badge';
+
 export { Checkbox } from './Checkbox';
 export { Switch } from './Switch';
 export type { SwitchProps } from './Switch';