Add AvatarPrimitiveContext for Avatar fragments

Author: kotAPI

src/core/primitives/Avatar/contexts/AvatarPrimitiveContext.tsx

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+interface AvatarPrimitiveContextType {
+    isImageLoaded: boolean;
+    hasError: boolean;
+    handleLoadImage: () => void;
+    handleErrorImage: () => void;
+}
+
+export const AvatarPrimitiveContext = createContext<AvatarPrimitiveContextType>({} as AvatarPrimitiveContextType);

src/core/primitives/Avatar/fragments/AvatarPrimitiveFallback.tsx

@@ -1,11 +1,18 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { AvatarPrimitiveContext } from '../contexts/AvatarPrimitiveContext';
 
 export interface AvatarPrimitiveFallbackProps {
     children: React.ReactNode;
     className?: string;
 }
 
 const AvatarPrimitiveFallback = ({ children, className = '' }: AvatarPrimitiveFallbackProps) => {
+    const { isImageLoaded, hasError } = useContext(AvatarPrimitiveContext);
+
+    if (isImageLoaded || hasError) {
+        return null;
+    }
+
     return <div className={className}>{children}</div>;
 };
 

src/core/primitives/Avatar/fragments/AvatarPrimitiveImage.tsx

@@ -0,0 +1,38 @@
+import React, { useContext } from 'react';
+
+import { AvatarPrimitiveContext } from '../contexts/AvatarPrimitiveContext';
+
+export interface AvatarRootImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    src?: string;
+    alt?: string;
+    className?: string;
+    status?: 'loading' | 'loaded' | 'error';
+}
+
+const AvatarPrimitiveImage = ({
+    src,
+    alt = 'Avatar',
+    className = '',
+    status = 'loading',
+    ...props
+}: AvatarRootImageProps) => {
+    const { handleErrorImage, handleLoadImage } = useContext(AvatarPrimitiveContext);
+
+    // If there's no src or there's an error, render nothing
+    if (!src || status === 'error') {
+        return null;
+    }
+
+    return (
+        <img
+            src={src}
+            alt={alt}
+            onError={handleErrorImage}
+            onLoad={handleLoadImage}
+            className={className}
+            {...props}
+        />
+    );
+};
+
+export default AvatarPrimitiveImage;

src/core/primitives/Avatar/fragments/AvatarPrimitiveRoot.tsx

@@ -1,12 +1,36 @@
-import React from 'react';
+import React, { useContext, useState } from 'react';
+
+import { AvatarPrimitiveContext } from '../contexts/AvatarPrimitiveContext';
 
 export interface AvatarPrimitiveRootProps {
     children: React.ReactNode;
     className?: string;
 }
 
 const AvatarPrimitiveRoot = ({ children, className = '' }: AvatarPrimitiveRootProps) => {
-    return <div className={className}>{children}</div>;
+    const [isImageLoaded, setIsImageLoaded] = useState(false);
+    const [hasError, setHasError] = useState(false);
+
+    const handleLoadImage = () => {
+        setIsImageLoaded(true);
+        setHasError(false);
+    };
+
+    const handleErrorImage = () => {
+        setIsImageLoaded(false);
+        setHasError(true);
+    };
+
+    const values = {
+        isImageLoaded,
+        hasError,
+        handleLoadImage,
+        handleErrorImage
+    };
+
+    return <AvatarPrimitiveContext.Provider value={values}>
+        <div className={className}>{children}</div>
+    </AvatarPrimitiveContext.Provider>;
 };
 
 export default AvatarPrimitiveRoot;

src/core/primitives/Avatar/fragments/AvatarRootImage.tsx

@@ -1,11 +1,11 @@
 import AvatarPrimitiveRoot from './fragments/AvatarPrimitiveRoot';
 import AvatarPrimitiveFallback from './fragments/AvatarPrimitiveFallback';
-import AvatarRootImage from './fragments/AvatarRootImage';
+import AvatarPrimitiveImage from './fragments/AvatarPrimitiveImage';
 
 const AvatarPrimitive = {
     Root: AvatarPrimitiveRoot,
     Fallback: AvatarPrimitiveFallback,
-    Image: AvatarRootImage
+    Image: AvatarPrimitiveImage
 } as const;
 
 export default AvatarPrimitive;

src/core/primitives/Avatar/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import AvatarPrimitive from '../index';
+import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Primitives/AvatarPrimitive',
+    component: AvatarPrimitive,
+    render: (args) => <SandboxEditor>
+        <div >
+            <div className='flex space-x-2 w-full flex-1'>
+                <AvatarPrimitive.Root>
+                    <AvatarPrimitive.Image src='https://via.placeholder.com/150' alt='Avatar' />
+                    <AvatarPrimitive.Fallback>
+                        <span>AB</span>
+                    </AvatarPrimitive.Fallback>
+                </AvatarPrimitive.Root>
+
+            </div>
+
+        </div>
+    </SandboxEditor>
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const All = {
+    args: {
+
+    }
+};