@jmruthers/pace-core 0.5.187 → 0.5.189

package/src/components/Avatar/Avatar.tsx

@@ -1,11 +1,14 @@
 /**
- * @file Avatar Component Suite
+ * @file Avatar Component
  * @package @jmruthers/pace-core
  * @module Components
  * @since 0.1.0
  *
- * A flexible and accessible avatar component for displaying user profile images or initials.
- * Includes Avatar, AvatarImage, and AvatarFallback subcomponents.
+ * A simple and accessible avatar component for displaying user profile images or initials.
+ * Supports three approaches for image display:
+ * - File reference props (uses FileDisplay for Supabase storage)
+ * - File ID (uses file reference lookup)
+ * - Direct URL (simple img tag for public images)
  *
  * Features:
  * - Circular avatar display
@@ -16,16 +19,31 @@
  *
  * @example
  * ```tsx
- * // Basic avatar with image
- * <Avatar>
- *   <AvatarImage src="/user.jpg" alt="User" />
- *   <AvatarFallback>AB</AvatarFallback>
- * </Avatar>
+ * // Avatar with direct URL
+ * <Avatar 
+ *   src="/user.jpg" 
+ *   alt="User" 
+ *   fallback="AB"
+ * />
+ *
+ * // Avatar with file reference props
+ * <Avatar
+ *   table_name="user_profiles"
+ *   record_id={userId}
+ *   organisation_id={orgId}
+ *   category={FileCategory.PROFILE_PHOTOS}
+ *   fallback="JD"
+ * />
+ *
+ * // Avatar with file ID
+ * <Avatar
+ *   fileId={fileReferenceId}
+ *   organisation_id={orgId}
+ *   fallback="JD"
+ * />
  *
  * // Avatar with fallback only
- * <Avatar>
- *   <AvatarFallback>JD</AvatarFallback>
- * </Avatar>
+ * <Avatar fallback="JD" />
  * ```
  *
  * @accessibility
@@ -35,50 +53,158 @@
  */
 
 import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
-
+import { FileCategory } from "../../types/file-reference"
+import { FileDisplay } from "../FileDisplay/FileDisplay"
+import { useFileReferenceById } from "../../hooks/useFileReference"
+import { useUnifiedAuth } from "../../providers/services/UnifiedAuthProvider"
 import { cn } from "../../utils/core/cn"
 
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
-    )}
-    {...props}
-  />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
+/**
+ * Size variants for avatar
+ */
+const sizeClasses = {
+  xs: 'h-4 w-4 text-xs',
+  sm: 'h-6 w-6 text-sm',
+  md: 'h-10 w-10 text-base',
+  lg: 'h-12 w-12 text-lg',
+  xl: 'h-16 w-16 text-xl',
+  '2xl': 'h-20 w-20 text-2xl'
+}
+
+interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+  // File reference approach (uses FileDisplay)
+  table_name?: string
+  record_id?: string
+  organisation_id?: string
+  category?: FileCategory
+  
+  // OR file ID approach (uses file reference lookup)
+  fileId?: string
+  
+  // OR direct URL approach (simple <img> tag)
+  src?: string
+  alt?: string
+  
+  // Fallback (always required)
+  fallback: string
+  
+  // Styling
+  className?: string
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+}
 
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn("object-cover", className)}
-    {...props}
-  />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
+/**
+ * Avatar component for displaying user profile images or initials
+ */
+const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
+  ({ 
+    table_name,
+    record_id,
+    organisation_id,
+    category,
+    fileId,
+    src,
+    alt,
+    fallback,
+    className,
+    size = 'md',
+    ...props 
+  }, ref) => {
+    const [imageError, setImageError] = React.useState(false)
+    const { supabase } = useUnifiedAuth()
+    
+    // For fileId approach, get file reference and URL
+    // Only fetch if we have all required values
+    const canFetchFileId = Boolean(fileId && organisation_id && supabase)
+    const { fileReference, fileUrl: fileIdUrl, isLoading: fileIdLoading } = useFileReferenceById(
+      supabase || ({} as any), // Hook requires SupabaseClient, but we check canFetchFileId before using result
+      canFetchFileId ? fileId! : null,
+      canFetchFileId ? organisation_id! : null
+    )
+    
+    // Determine which approach to use
+    const hasFileProps = table_name && record_id && organisation_id && category && supabase
+    const hasFileId = canFetchFileId && fileIdUrl && !fileIdLoading
+    const hasDirectUrl = src && !imageError
+    
+    // Determine if we should show fallback
+    const showFallback = !hasDirectUrl && (!hasFileProps && !hasFileId) || imageError || (canFetchFileId && !fileIdUrl && !fileIdLoading)
+    
+    // Base classes for avatar container
+    const baseClasses = size === 'md' 
+      ? "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"
+      : `relative flex ${sizeClasses[size]} shrink-0 overflow-hidden rounded-full`
+    
+    // Fallback classes (don't include className to avoid conflicts)
+    const fallbackClasses = "flex h-full w-full items-center justify-center rounded-full text-sec-50 bg-sec-500"
+    
+    // Image classes for direct URL and fileId approaches
+    const imageClasses = "object-cover h-full w-full"
+    
+    // Container classes (include className here for container styling)
+    const containerClasses = cn(baseClasses, className)
+    
+    // Handle image error for direct URL
+    const handleImageError = React.useCallback(() => {
+      setImageError(true)
+    }, [])
+    
+    // Reset error when src changes
+    React.useEffect(() => {
+      if (src) {
+        setImageError(false)
+      }
+    }, [src])
+    
+    return (
+      <div
+        ref={ref}
+        className={containerClasses}
+        {...props}
+      >
+        {showFallback ? (
+          <div className={fallbackClasses} aria-label={alt || fallback}>
+            {fallback}
+          </div>
+        ) : hasFileProps ? (
+          // File reference props approach - use FileDisplay
+          <FileDisplay
+            table_name={table_name!}
+            record_id={record_id!}
+            organisation_id={organisation_id!}
+            category={category!}
+            displayOnly={true}
+            showFallback={true}
+            fallbackText={fallback}
+            className={cn(imageClasses, className)}
+          />
+        ) : hasFileId && fileIdUrl ? (
+          // File ID approach - use img tag with fetched URL
+          <img
+            src={fileIdUrl}
+            alt={alt || fallback}
+            className={imageClasses}
+            onError={handleImageError}
+          />
+        ) : hasDirectUrl ? (
+          // Direct URL approach - use img tag
+          <img
+            src={src}
+            alt={alt || fallback}
+            className={imageClasses}
+            onError={handleImageError}
+          />
+        ) : (
+          // Fallback if nothing else works
+          <div className={fallbackClasses} aria-label={alt || fallback}>
+            {fallback}
+          </div>
+        )}
+      </div>
+    )
+  }
+)
 
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      "flex h-full w-full items-center justify-center rounded-full text-sec-50 bg-sec-500",
-      className
-    )}
-    {...props}
-  />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+Avatar.displayName = "Avatar"
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, type AvatarProps }

package/src/components/Avatar/index.ts

@@ -1,2 +1,2 @@
 
-export { Avatar, AvatarImage, AvatarFallback } from './Avatar';
+export { Avatar, type AvatarProps } from './Avatar';

package/src/components/UserMenu/UserMenu.test.tsx

@@ -117,19 +117,17 @@ vi.mock('../Dialog', () => ({
   DialogOverlay: () => <div data-testid="dialog-overlay" />,
 }));
 
-// Mock the Avatar components
+// Mock the Avatar component
 vi.mock('../Avatar', () => ({
-  Avatar: ({ children, className }: { children: React.ReactNode; className?: string }) => (
+  Avatar: ({ src, alt, fallback, className }: { src?: string; alt?: string; fallback: string; className?: string }) => (
     <div data-testid="avatar" className={className}>
-      {children}
+      {src ? (
+        <img data-testid="avatar-image" src={src} alt={alt || fallback} />
+      ) : (
+        <div data-testid="avatar-fallback">{fallback}</div>
+      )}
     </div>
   ),
-  AvatarFallback: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="avatar-fallback">{children}</div>
-  ),
-  AvatarImage: ({ src, alt }: { src?: string; alt?: string }) => (
-    <img data-testid="avatar-image" src={src} alt={alt} />
-  ),
 }));
 
 // Mock the Button component

package/src/components/UserMenu/UserMenu.tsx

@@ -122,7 +122,7 @@ import {
   DialogOverlay
 } from '../Dialog';
 import { PasswordChangeForm, PasswordChangeFormError } from '../PasswordChange/PasswordChangeForm';
-import { Avatar, AvatarFallback, AvatarImage } from '../Avatar';
+import { Avatar } from '../Avatar';
 import { Button } from '../Button';
 
 export interface UserMenuProps {
@@ -166,10 +166,12 @@ export const UserMenu = React.memo<UserMenuProps>(function UserMenu({
         <SelectTrigger asChild>
           <Button variant="outline" className="flex items-center gap-2" aria-label={userInfo.displayName}>
             {showAvatar && (
-              <Avatar className="size-7">
-                <AvatarImage src={userInfo.avatarUrl} alt={userInfo.displayName} />
-                <AvatarFallback>{userInfo.initial}</AvatarFallback>
-              </Avatar>
+              <Avatar 
+                src={userInfo.avatarUrl} 
+                alt={userInfo.displayName}
+                fallback={userInfo.initial}
+                className="size-7"
+              />
             )}
             <span>{userInfo.displayName}</span>
             <ChevronDown className="h-4 w-4" />

package/src/components/index.ts

@@ -52,7 +52,8 @@ export { Textarea } from './Textarea';
 export type { TextareaProps } from './Textarea';
 
 export { Alert, AlertTitle, AlertDescription } from './Alert';
-export { Avatar, AvatarImage, AvatarFallback } from './Avatar';
+export { Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
 
 export { Badge } from './Badge';
 export type { BadgeProps, BadgeVariant } from './Badge';

package/src/index.ts

@@ -85,7 +85,8 @@ export { Textarea } from './components/Textarea/Textarea';
 export type { TextareaProps } from './components/Textarea/Textarea';
 
 export { Alert, AlertTitle, AlertDescription } from './components/Alert/Alert';
-export { Avatar, AvatarImage, AvatarFallback } from './components/Avatar/Avatar';
+export { Avatar } from './components/Avatar/Avatar';
+export type { AvatarProps } from './components/Avatar/Avatar';
 
 export { Badge } from './components/Badge/Badge';
 export type { BadgeProps, BadgeVariant } from './components/Badge/Badge';

package/src/services/OrganisationService.ts

@@ -344,7 +344,7 @@ export class OrganisationService extends BaseService implements IOrganisationSer
       
     try {
       // Get user's organisation memberships using secure RPC function
-      // Only get actual members (org_admin, leader, member) - exclude supporters
+      // Include all roles (org_admin, leader, member, supporter) - supporters can access PORTAL
       let memberships, membershipError;
       try {
         // Add timeout and abort signal to prevent hanging RPC calls
@@ -368,10 +368,11 @@ export class OrganisationService extends BaseService implements IOrganisationSer
         
         const result = await Promise.race([rpcPromise, timeoutPromise]) as { data: OrganisationRoleRpcResponse[] | null; error: Error | null };
         
-        // Filter to only actual members (org_admin, leader, member) - exclude supporters
+        // Filter to organisation members (org_admin, leader, member, supporter)
+        // Supporters are included to allow PORTAL access
         // Map to branded types when filtering
         memberships = result.data?.filter((role) => 
-          ['org_admin', 'leader', 'member'].includes(role.role)
+          ['org_admin', 'leader', 'member', 'supporter'].includes(role.role)
         ).map((m) => ({
           ...m,
           user_id: assertUserId(m.user_id),
@@ -423,7 +424,7 @@ export class OrganisationService extends BaseService implements IOrganisationSer
               .eq('user_id', this.user.id)
               .eq('status', 'active')
               .is('revoked_at', null)
-              .in('role', ['org_admin', 'leader', 'member']);
+              .in('role', ['org_admin', 'leader', 'member', 'supporter']);
             
             if (fallbackError) {
               logger.error("OrganisationService", "Fallback query also failed:", fallbackError);