Fix Avatar + AvatarGroup composable API + other fixes

src/components/ui/Avatar/Avatar.tsx

@@ -1,46 +1,20 @@
 import React from 'react';
 import { clsx } from 'clsx';
-import AvatarPrimitive from '~/core/primitives/Avatar';
-import { useCreateDataAttribute, useComposeAttributes, useCreateDataAccentColorAttribute } from '~/core/hooks/createDataAttribute';
 
-const COMPONENT_NAME = 'Avatar';
-
-export type AvatarProps = {
+import AvatarRoot from './fragments/AvatarRoot';
+import AvatarImage from './fragments/AvatarImage';
+import AvatarFallback from './fragments/AvatarFallback';
 
-    customRootClass?: string,
-    fallback?: string,
-    className?: string,
-    variant?: string;
-    size?:string;
-    src?: string,
-    alt?: string,
-    color?:string,
-    asChild?: boolean,
-    props?: Record<string, any>[]
-}
+const COMPONENT_NAME = 'Avatar';
 
-const Avatar = ({ customRootClass = '', fallback, className, src, alt, variant = '', size = '', asChild = false, color = '', ...props }: AvatarProps) => {
-    const dataAttributes = useCreateDataAttribute('avatar', { variant, size });
-    const accentAttributes = useCreateDataAccentColorAttribute(color);
-    const composedAttributes = useComposeAttributes(dataAttributes(), accentAttributes());
-    return (
-        <AvatarPrimitive.Root customRootClass={customRootClass} asChild={asChild} {...composedAttributes()}>
-            <AvatarPrimitive.Image
-                src={src}
-                alt={alt}
-                className={clsx(className)}
-                {...props}
-            />
-            <AvatarPrimitive.Fallback color={color}>
-                {fallback}
-            </AvatarPrimitive.Fallback>
-        </AvatarPrimitive.Root>
-    );
+const Avatar = () => {
+    console.warn('Direct usage of Avatar is not supported. Please use Avatar.Root, Avatar.Image, Avatar.Fallback instead.');
+    return null;
 };
 
 Avatar.displayName = COMPONENT_NAME;
-Avatar.Root = AvatarPrimitive.Root;
-Avatar.Image = AvatarPrimitive.Image;
-Avatar.Fallback = AvatarPrimitive.Fallback;
+Avatar.Root = AvatarRoot;
+Avatar.Image = AvatarImage;
+Avatar.Fallback = AvatarFallback;
 
 export default Avatar;

src/components/ui/Avatar/contexts/AvatarContext.tsx

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+type AvatarContextType = {
+    size?: string;
+    variant?: string;
+    color?: string;
+    rootClass?: string;
+}
+export const AvatarContext = createContext<AvatarContextType>({
+    size: '',
+    variant: '',
+    color: '',
+    rootClass: ''
+} as AvatarContextType);

src/components/ui/Avatar/fragments/AvatarFallback.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import React, { useContext } from 'react';
+
+import AvatarPrimitiveFallback, { AvatarPrimitiveFallbackProps } from '~/core/primitives/Avatar/fragments/AvatarPrimitiveFallback';
+import { AvatarContext } from '../contexts/AvatarContext';
+import { clsx } from 'clsx';
+
+const AvatarFallback = ({ children, ...props }: AvatarPrimitiveFallbackProps) => {
+    const { rootClass } = useContext(AvatarContext);
+    return <AvatarPrimitiveFallback className={clsx(`${rootClass}-fallback`)} {...props}>{children}</AvatarPrimitiveFallback>;
+};
+
+export default AvatarFallback;

src/components/ui/Avatar/fragments/AvatarImage.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import React, { useContext } from 'react';
+import AvatarPrimitiveImage, { AvatarRootImageProps } from '~/core/primitives/Avatar/fragments/AvatarPrimitiveImage';
+import { AvatarContext } from '../contexts/AvatarContext';
+import { clsx } from 'clsx';
+
+type AvatarImageProps = AvatarRootImageProps & {
+    src?: string;
+    alt?: string;
+}
+
+const AvatarImage = ({ src = '', alt = '', children, ...props }: AvatarImageProps) => {
+    const { rootClass } = useContext(AvatarContext);
+    return <AvatarPrimitiveImage className={clsx(`${rootClass}-image`)} src={src} alt={alt} {...props} />;
+};
+
+export default AvatarImage;

src/components/ui/Avatar/fragments/AvatarRoot.tsx

@@ -0,0 +1,30 @@
+'use client';
+import React from 'react';
+import AvatarPrimitiveRoot, { AvatarPrimitiveRootProps } from '~/core/primitives/Avatar/fragments/AvatarPrimitiveRoot';
+import { clsx } from 'clsx';
+import { customClassSwitcher } from '~/core';
+import { AvatarContext } from '../contexts/AvatarContext';
+import { useCreateDataAttribute, useComposeAttributes, useCreateDataAccentColorAttribute } from '~/core/hooks/createDataAttribute';
+const COMPONENT_NAME = 'Avatar';
+
+export type AvatarRootProps = AvatarPrimitiveRootProps & {
+    customRootClass?: string;
+    className?: string;
+    size?: string;
+    variant?: string;
+    color?: string;
+}
+
+const AvatarRoot = ({ children, customRootClass = '', className = '', size = '', variant = '', color = '', ...props }: AvatarRootProps) => {
+    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
+
+    const dataAttributes = useCreateDataAttribute('avatar', { variant, size });
+    const accentAttributes = useCreateDataAccentColorAttribute(color);
+    const composedAttributes = useComposeAttributes(dataAttributes(), accentAttributes());
+
+    return <AvatarContext.Provider value={{ size, variant, color, rootClass }}>
+        <AvatarPrimitiveRoot className={clsx(rootClass, className)} {...composedAttributes()} {...props} >{children}</AvatarPrimitiveRoot>
+    </AvatarContext.Provider>;
+};
+
+export default AvatarRoot;

src/components/ui/Avatar/stories/Avatar.stories.tsx

@@ -9,13 +9,27 @@ export default {
     title: 'Components/Avatar',
     component: Avatar,
     render: (args: JSX.IntrinsicAttributes & AvatarProps) => <SandboxEditor>
-        <Avatar {...args} />
+        <Avatar.Root color={args.color} size={args.size} variant={args.variant} customRootClass={args.customRootClass}>
+            <Avatar.Image src={args.src} alt={args.alt} />
+            <Avatar.Fallback>{args.fallback}</Avatar.Fallback>
+        </Avatar.Root>
     </SandboxEditor>
 };
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const withSrc = {
     args: {
+        src: avatarImage1,
+        fallback: 'PK',
+        color: 'blue',
+        size: 'small',
+        variant: 'outline'
+    }
+};
+
+export const withCustomRootClass = {
+    args: {
+        customRootClass: 'acme-corp',
         src: avatarImage1,
         fallback: 'PK'
     }
@@ -48,3 +62,22 @@ export const withColor = {
         color: 'blue'
     }
 };
+
+export const withSize = {
+    args: {
+        fallback: 'RU',
+        size: 'small'
+    }
+};
+
+const WithoutImgTemplate = () => {
+    return <SandboxEditor>
+        <Avatar.Root size='small' variant='outline'>
+            <Avatar.Fallback>PK</Avatar.Fallback>
+        </Avatar.Root>
+    </SandboxEditor>;
+};
+
+export const withoutImg = {
+    render: (args: JSX.IntrinsicAttributes & AvatarProps) => <WithoutImgTemplate />
+};

src/components/ui/Avatar/tests/Avatar.test.tsx

@@ -2,40 +2,54 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import Avatar from '../Avatar';
 
+const Component = () => {
+    return <Avatar.Root color='blue' size='small' variant='outline'>
+        <Avatar.Image src='https://i.pravatar.cc/300' alt='avatar' />
+        <Avatar.Fallback>RU</Avatar.Fallback>
+    </Avatar.Root>;
+};
+
+const FallbackComponent = () => {
+    return <Avatar.Root color='blue' size='small' variant='outline'>
+        <Avatar.Fallback>RU</Avatar.Fallback>
+    </Avatar.Root>;
+};
+
 describe('Avatar', () => {
     test('renders Avatar component', () => {
-        render(<Avatar fallback="RU" />);
+        render(<Component />);
         expect(screen.getByText('RU')).toBeInTheDocument();
     });
 
     test('renders img tag with valid src', () => {
         const url = 'https://i.pravatar.cc/300';
-        render(<Avatar src={url} fallback="RU" />);
+        render(<Component />);
         const image = screen.getByRole('img');
         // check if image has url as src
         expect(image).toHaveAttribute('src', url);
     });
 
     test('renders fallback when src is not provided', async() => {
-        render(<Avatar fallback="RU" />);
+        render(<Component />);
         expect(screen.getByText('RU')).toBeInTheDocument();
     });
 
     test('renders avatar with the given variant', () => {
-        render(<Avatar fallback="RU" variant='outline'/>);
+        render(<FallbackComponent />);
         const fallback = screen.getByText('RU');
         expect(fallback.parentElement).toHaveAttribute('data-avatar-variant', 'outline');
     });
 
     test('renders avatar with the given size', () => {
-        render(<Avatar fallback="RU"size='small'/>);
+        render(<FallbackComponent />);
         const fallback = screen.getByText('RU');
         expect(fallback.parentElement).toHaveAttribute('data-avatar-size', 'small');
     });
 
-    test('renders color for fallback when src is not provided', async() => {
-        render(<Avatar fallback="RU" color='blue'/>);
-        expect(screen.getByText('RU')).toHaveAttribute('data-rad-ui-accent-color', 'blue');
+    test('renders avatar with the given color', () => {
+        render(<FallbackComponent />);
+        const fallback = screen.getByText('RU');
+        expect(fallback.parentElement).toHaveAttribute('data-rad-ui-accent-color', 'blue');
     });
 
     test('renders avatar with the given asChild', () => {

src/components/ui/AvatarGroup/AvatarGroup.tsx

@@ -1,38 +1,16 @@
-import React from 'react';
-import { clsx } from 'clsx';
 import AvatarGroupRoot from './fragments/AvatarGroupRoot';
-import AvatarPrimitiveRoot from '~/core/primitives/Avatar/fragments/AvatarPrimitiveRoot';
-import AvatarPrimitiveFallback from '~/core/primitives/Avatar/fragments/AvatarPrimitiveFallback';
-import AvatarPrimitiveImage from '~/core/primitives/Avatar/fragments/AvatarPrimitiveImage';
+import AvatarGroupItem from './fragments/AvatarGroupItem';
+import AvatarGroupAvatar from './fragments/AvatarGroupAvatar';
+import AvatarGroupFallback from './fragments/AvatarGroupFallback';
 
-const COMPONENT_NAME = 'AvatarGroup';
-
-// contexts
-
-export type AvatarGroupProps = {
-    avatars: { fallback: string, src: string, alt: string }[];
-    size: 'sm' | 'md' | 'lg';
-    customRootClass?: string;
-    className?: string;
-    color?:string;
-    props?: Record<string, any>;
-}
-
-const AvatarGroup = ({ avatars = [], size, customRootClass = '', className, color, ...props }: AvatarGroupProps) => {
-    return <AvatarGroupRoot customRootClass={customRootClass} className={clsx(className)} {...props} >
-        {avatars.map((avatar, index) => (
-            <AvatarPrimitiveRoot key={index}>
-                <AvatarPrimitiveImage src={avatar.src} alt={avatar.alt} />
-                <AvatarPrimitiveFallback color={color}>{avatar.fallback}</AvatarPrimitiveFallback>
-            </AvatarPrimitiveRoot>
-        ))}
-    </AvatarGroupRoot>;
+const AvatarGroup = () => {
+    console.warn('Direct usage of AvatarGroup is not supported. Please use AvatarGroup.Root, AvatarGroup.Item, AvatarGroup.Avatar, AvatarGroup.Fallback instead.');
+    return null;
 };
 
-AvatarGroup.displayName = COMPONENT_NAME;
 AvatarGroup.Root = AvatarGroupRoot;
-AvatarGroup.AvatarRoot = AvatarPrimitiveRoot;
-AvatarGroup.AvatarImage = AvatarPrimitiveImage;
-AvatarGroup.AvatarFallback = AvatarPrimitiveFallback;
+AvatarGroup.Item = AvatarGroupItem;
+AvatarGroup.Avatar = AvatarGroupAvatar;
+AvatarGroup.Fallback = AvatarGroupFallback;
 
 export default AvatarGroup;

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

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+export const AvatarGroupContext = createContext({
+    rootClass: '',
+    size: '',
+    variant: ''
+});

src/components/ui/AvatarGroup/fragments/AvatarGroupAvatar.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import React from 'react';
+import AvatarPrimitiveImage from '~/core/primitives/Avatar/fragments/AvatarPrimitiveImage';
+
+const AvatarGroupAvatar = ({ src, alt }: { src: string, alt: string }) => {
+    return <AvatarPrimitiveImage src={src} alt={alt} />;
+};
+
+export default AvatarGroupAvatar;

src/components/ui/AvatarGroup/fragments/AvatarGroupFallback.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import React, { useContext } from 'react';
+import AvatarPrimitiveFallback from '~/core/primitives/Avatar/fragments/AvatarPrimitiveFallback';
+import { AvatarGroupContext } from '../contexts/AvatarGroupContext';
+
+const AvatarGroupFallback = ({ children }: { fallback?: string, children: React.ReactNode }) => {
+    const { rootClass } = useContext(AvatarGroupContext);
+    return <AvatarPrimitiveFallback className={`${rootClass}-fallback`}>
+        {children}
+    </AvatarPrimitiveFallback>;
+};
+
+export default AvatarGroupFallback;

src/components/ui/AvatarGroup/fragments/AvatarGroupItem.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import React, { useContext } from 'react';
+import AvatarPrimitiveRoot from '~/core/primitives/Avatar/fragments/AvatarPrimitiveRoot';
+import { AvatarGroupContext } from '../contexts/AvatarGroupContext';
+import { useCreateDataAccentColorAttribute, useComposeAttributes } from '~/core/hooks/createDataAttribute';
+
+const AvatarGroupItem = ({ color = '', children }: { color?: string, children: React.ReactNode }) => {
+    const { rootClass } = useContext(AvatarGroupContext);
+
+    const accentAttributes = useCreateDataAccentColorAttribute(color);
+    const composedAttributes = useComposeAttributes(accentAttributes());
+
+    return <AvatarPrimitiveRoot className={`${rootClass}-item`} {...composedAttributes()}>
+        {children}
+    </AvatarPrimitiveRoot>;
+};
+
+export default AvatarGroupItem;

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

@@ -1,19 +1,29 @@
 import React from 'react';
 import { clsx } from 'clsx';
 import { customClassSwitcher } from '~/core/customClassSwitcher';
-
+import { AvatarGroupContext } from '../contexts/AvatarGroupContext';
+import { useCreateDataAttribute, useComposeAttributes, useCreateDataAccentColorAttribute } from '~/core/hooks/createDataAttribute';
 type AvatarGroupRootProps = {
     customRootClass?: string | '';
+    size?: string;
+    variant?: string;
     children: React.ReactNode;
     className?: string;
 }
 
-const AvatarGroupRoot = ({ customRootClass = '', children, className, ...props }: AvatarGroupRootProps) => {
-    const rootClass = customClassSwitcher(customRootClass, 'AvatarGroup');
+const COMPONENT_NAME = 'AvatarGroup';
+
+const AvatarGroupRoot = ({ customRootClass = '', size = '', variant = '', children, className, ...props }: AvatarGroupRootProps) => {
+    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
+    const dataAttributes = useCreateDataAttribute('avatar', { variant, size });
+    const composedAttributes = useComposeAttributes(dataAttributes());
+
     return (
-        <div className={clsx(rootClass, className)} {...props}>
-            {children}
-        </div>
+        <AvatarGroupContext.Provider value={{ size, variant, rootClass }}>
+            <div className={clsx(rootClass, className)} {...composedAttributes()} {...props}>
+                {children}
+            </div>
+        </AvatarGroupContext.Provider>
     );
 };