AvatarPrimitive Component + Base AvatarGroup component

src/components/tools/SandboxEditor/SandboxEditor.tsx

@@ -28,7 +28,7 @@ const ColorSelect = ({ color, colorName, changeAccentColor }: ColorSelectProps)
         style={{ width: dimensions, height: dimensions, backgroundColor: color.light['900'] }}></div>;
 };
 
-type SandboxProps = {className?: string} & PropsWithChildren
+type SandboxProps = {className?: string | ''} & PropsWithChildren
 
 const SandboxEditor = ({ children, className } : SandboxProps) => {
     const [isDarkMode, setIsDarkMode] = useState(false);

src/components/ui/Avatar/Avatar.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
 
-import AvatarRoot from './shards/AvatarRoot';
-import AvatarImage from './shards/AvatarImage';
-import AvatarFallback from './shards/AvatarFallback';
+import AvatarPrimitive from '~/core/primitives/Avatar';
 
 const COMPONENT_NAME = 'Avatar';
 
 export type AvatarProps = {
-    children?: React.ReactNode,
+
     customRootClass?: string,
     fallback?: string,
     className?: string,
@@ -16,24 +14,25 @@ export type AvatarProps = {
     props?: Record<string, any>[]
 }
 
-const Avatar = ({ children, customRootClass, fallback, className, src, alt, ...props }: AvatarProps) => {
+const Avatar = ({ customRootClass = '', fallback, className, src, alt, ...props }: AvatarProps) => {
     return (
-        <AvatarRoot customRootClass={customRootClass}>
-            <AvatarImage
+        <AvatarPrimitive.Root src={src} customRootClass={customRootClass}>
+            <AvatarPrimitive.Image
                 src={src}
                 alt={alt}
                 className={className}
-                customRootClass={customRootClass}
                 {...props}
             />
-            <AvatarFallback customRootClass={customRootClass} fallback={fallback}/>
-        </AvatarRoot>
+            <AvatarPrimitive.Fallback>
+                {fallback}
+            </AvatarPrimitive.Fallback>
+        </AvatarPrimitive.Root>
     );
 };
 
 Avatar.displayName = COMPONENT_NAME;
-Avatar.Root = AvatarRoot;
-Avatar.Image = AvatarImage;
-Avatar.Fallback = AvatarFallback;
+Avatar.Root = AvatarPrimitive.Root;
+Avatar.Image = AvatarPrimitive.Image;
+Avatar.Fallback = AvatarPrimitive.Fallback;
 
 export default Avatar;

src/components/ui/AvatarGroup/AvatarGroup.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import AvatarGroupRoot from './shards/AvatarGroupRoot';
+
+const COMPONENT_NAME = 'AvatarGroup';
+
+// contexts
+
+// export type AvatarProps = {
+//     children?: React.ReactNode,
+//     customRootClass?: string,
+//     fallback?: string,
+//     className?: string,
+//     src?: string,
+//     alt?: string,
+//     props?: Record<string, any>[]
+// }
+
+const AvatarGroup = ({ avatars = [], size, customRootClass = '', className }) => {
+    return <AvatarGroupRoot>
+
+    </AvatarGroupRoot>;
+};
+
+AvatarGroup.displayName = COMPONENT_NAME;
+
+export default AvatarGroup;

src/components/ui/AvatarGroup/contexts/AvatarGroupContext.tsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const AvatarGroupContext = createContext({});
+
+export default AvatarGroupContext;

src/components/ui/AvatarGroup/shards/AvatarGroupRoot.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import AvatarGroupContext from './contexts/AvatarGroupContext';
+
+const AvatarGroupRoot = () => {
+    return (
+        <div>
+            <AvatarGroupContext.Provider value={{}}>
+                <AvatarGroupRoot >
+                </AvatarGroupRoot>
+            </AvatarGroupContext.Provider>
+
+        </div>
+    );
+};
+
+export default AvatarGroupRoot;

src/components/ui/RadioGroup/RadioGroup.stories.js

@@ -3,37 +3,38 @@ import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 import { useState } from 'react';
 
 const RadioButton = (args) => {
-   const options = [
-    {id: 'html', value: 'html', label:'HTML'},
-    {id: 'css', value: 'css', label:'CSS'},
-    {id: 'javascript', value: 'javascript', label:'JavaScript'},]
+    const options = [
+        { id: 'html', value: 'html', label: 'HTML' },
+        { id: 'css', value: 'css', label: 'CSS' },
+        { id: 'javascript', value: 'javascript', label: 'JavaScript' }];
 
-    const [language, setLanguage] = useState({})
+    const [language, setLanguage] = useState({});
 
     const handleChange = (e) => {
-          setLanguage(e.target.value)
-    }
-      return (
+        setLanguage(e.target.value);
+    };
+    return (
         <SandboxEditor>
-                {options.map((option) => (
-            <RadioGroup className='radioItems'{...args}
-            key={option.id} 
-            id={option.id}
-            name='language'
-            value={option.value}
-            checked={language === option.value}
-            onChange={handleChange} >
-                <span id={option.id} >{option.label}</span>    
-                   </RadioGroup>
-                    ))}
+            {options.map((option) => (
+                <RadioGroup
+                    className='radioItems'{...args}
+                    key={option.id}
+                    id={option.id}
+                    name='language'
+                    value={option.value}
+                    checked={language === option.value}
+                    onChange={handleChange} >
+                    <span id={option.id} >{option.label}</span>
+                </RadioGroup>
+            ))}
         </SandboxEditor>
-      )
-}
+    );
+};
 
 export default {
     title: 'UI/Input/RadioGroup',
     component: RadioGroup,
-    render: (args) => <RadioButton {...args}/>   
+    render: (args) => <RadioButton {...args}/>
 };
 
-export const All = {};
+export const All = {};

src/components/ui/RadioGroup/RadioGroup.tsx

@@ -1,28 +1,28 @@
-import React, { DetailedHTMLProps, InputHTMLAttributes, PropsWithChildren} from 'react';
-import { customClassSwitcher} from "~/core";
+import React, { DetailedHTMLProps, InputHTMLAttributes, PropsWithChildren } from 'react';
+import { customClassSwitcher } from '~/core';
 import RadioPrimitive from '~/core/primitives/Radio';
 const COMPONENT_NAME = 'RadioGroup';
 
 export type RadioGroupProps = {
-  
+
     children?: React.ReactNode;
     className: string;
-    customRootClass: string;  
+    customRootClass: string;
 } & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & PropsWithChildren
 
-const RadioGroup =({children,type='radio', className='',customRootClass='', ...props}:RadioGroupProps) => {
-    const rootClass= customClassSwitcher(customRootClass,COMPONENT_NAME)
-   
+const RadioGroup = ({ children, type = 'radio', className = '', customRootClass = '', ...props }:RadioGroupProps) => {
+    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
+
     return (
-      <div className={`${rootClass} ${className}`} role='radiogroup'>
-        <RadioPrimitive 
-         type={type}
-         {...props}>
+        <div className={`${rootClass} ${className}`} role='radiogroup'>
+            <RadioPrimitive
+                type={type}
+                {...props}>
+
+                {children}
+            </RadioPrimitive>
+        </div>
+    );
+};
 
-         {children}
-       </RadioPrimitive>
-       </div>
-    )
-}
-
-export default RadioGroup;
+export default RadioGroup;

src/components/ui/Switch/stories/Switch.stories.js

@@ -13,12 +13,11 @@ const CheckBox = (args) => {
         setIsChecked(state);
     };
     return <SandboxEditor className="space-x-1">
-            {variants.map((variant,index) => (
-              <Switch defaultChecked={args} key={index} variant={variant} onChange={handleChange} {...args} /> 
-            ))}  
-
-           </SandboxEditor>;
-
+        {variants.map((variant, index) => (
+            <Switch defaultChecked={args} key={index} variant={variant} onChange={handleChange} {...args} />
+        ))}
+
+    </SandboxEditor>;
 };
 
 export const All = {};

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

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

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

@@ -0,0 +1,19 @@
+import React, { useContext } from 'react';
+import { AvatarPrimitiveContext } from '../contexts/AvatarPrimitiveContext';
+
+export interface AvatarPrimitiveFallbackProps {
+    children: React.ReactNode;
+    className?: string | '';
+}
+
+const AvatarPrimitiveFallback = ({ children, className = '' }: AvatarPrimitiveFallbackProps) => {
+    const { hasError, fallBackRootClass } = useContext(AvatarPrimitiveContext);
+
+    if (!hasError) {
+        return null;
+    }
+
+    return <span className={`${fallBackRootClass} ${className}`}>{children}</span>;
+};
+
+export default AvatarPrimitiveFallback;

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

@@ -0,0 +1,37 @@
+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 = '',
+    ...props
+}: AvatarRootImageProps) => {
+    const { handleErrorImage, handleLoadImage, hasError } = useContext(AvatarPrimitiveContext);
+
+    // If there's no src or there's an error, render nothing
+    if (!src || hasError) {
+        return null;
+    }
+
+    return (
+        <img
+            src={src}
+            alt={alt}
+            onError={handleErrorImage}
+            onLoad={handleLoadImage}
+            className={className}
+            {...props}
+        />
+    );
+};
+
+export default AvatarPrimitiveImage;