@jmruthers/pace-core 0.5.188 → 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';