@stackshift-ui/avatar 6.0.13-beta.2 → 7.0.0-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/avatar",
   "description": "",
-  "version": "6.0.13-beta.2",
+  "version": "7.0.0-beta.0",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -14,6 +14,8 @@
   "author": "WebriQ <info@webriq.com>",
   "devDependencies": {
     "@testing-library/react": "^16.0.1",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^22.7.0",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",
@@ -29,22 +31,23 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/eslint-config": "6.0.10-beta.2",
-    "@stackshift-ui/typescript-config": "6.0.10-beta.2"
+    "@stackshift-ui/typescript-config": "6.0.10",
+    "@stackshift-ui/eslint-config": "6.0.10"
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.10",
     "classnames": "^2.5.1",
-    "@stackshift-ui/system": "6.0.11-beta.2",
-    "@stackshift-ui/image": "6.0.11-beta.2",
-    "@stackshift-ui/scripts": "6.0.10-beta.2",
-    "@stackshift-ui/flex": "6.0.11-beta.2"
+    "@stackshift-ui/scripts": "6.1.0-beta.0",
+    "@stackshift-ui/flex": "7.0.0-beta.0",
+    "@stackshift-ui/image": "6.1.0-beta.0",
+    "@stackshift-ui/system": "6.1.0-beta.0"
   },
   "peerDependencies": {
+    "@stackshift-ui/system": ">=6.1.0-beta.0",
     "@types/react": "16.8 - 19",
     "next": "10 - 14",
     "react": "16.8 - 19",
-    "react-dom": "16.8 - 19",
-    "@stackshift-ui/system": ">=6.0.11-beta.2"
+    "react-dom": "16.8 - 19"
   },
   "peerDependenciesMeta": {
     "next": {

package/src/avatar.test.tsx

@@ -1,24 +1,76 @@
-import { cleanup, render, screen } from "@testing-library/react";
-import { afterEach, describe, test } from "vitest";
-import { Avatar } from "./avatar";
-
-describe.concurrent("avatar", () => {
-  afterEach(cleanup);
-
-  test("Common: Avatar - test if renders without errors", ({ expect }) => {
-    const clx = "avatar-class";
-
-    render(
-      <Avatar
-        className={clx}
-        src="https://via.placeholder.com/150"
-        alt="Sample Avatar"
-        text="StackShift"
-      />,
-    );
-    const elements = screen.getAllByTestId("div");
-    elements.forEach(element => {
-      expect(element.classList).toBeDefined();
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach } from "node:test";
+import React from "react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
+
+describe("avatar", () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  beforeEach(() => {
+    vi.mock("./avatar", async () => {
+      const actual = await vi.importActual("./avatar");
+
+      return {
+        ...actual,
+        AvatarImage: (props: React.ImgHTMLAttributes<HTMLImageElement>) => {
+          return <img {...props} />;
+        },
+      };
     });
   });
+
+  test("Common: Avatar - test if renders image when src is provided", () => {
+    const loadMock = vi.fn();
+
+    const { unmount } = render(
+      <Avatar data-testid="avatar" className="avatar-class">
+        <AvatarImage
+          data-testid="avatar-image"
+          onLoad={loadMock}
+          src="https://github.com/shadcn.png"
+          alt="@shadcn"
+        />
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>,
+    );
+
+    const image = screen.getByRole("img");
+    fireEvent.load(image);
+    expect(loadMock).toHaveBeenCalled();
+
+    const avatar = screen.getByTestId("avatar");
+    expect(avatar).toHaveClass("avatar-class");
+    expect(image).toHaveAttribute("src", "https://github.com/shadcn.png");
+    expect(image).toHaveAttribute("alt", "@shadcn");
+    unmount();
+  });
+
+  test("Common: Avatar - test if renders fallback when image fails to load", () => {
+    const loadMock = vi.fn();
+    const errorMock = vi.fn();
+
+    const { unmount } = render(
+      <Avatar data-testid="avatar" className="avatar-class">
+        <AvatarImage
+          data-testid="avatar-image"
+          onLoad={loadMock}
+          onError={errorMock}
+          src="https://github.com/shadcn.png"
+          alt="@shadcn"
+        />
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>,
+    );
+
+    const image = screen.getByRole("img");
+    fireEvent.error(image);
+    expect(errorMock).toHaveBeenCalled();
+
+    const fallback = screen.getByText("CN");
+    expect(fallback).toBeInTheDocument();
+    unmount();
+  });
 });

package/src/avatar.tsx

@@ -1,76 +1,63 @@
-import { Flex } from "@stackshift-ui/flex";
-import { Image } from "@stackshift-ui/image";
-import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
-import cn from "classnames";
-import type { ElementType, HTMLProps, ReactNode } from "react";
-import { useState } from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn, DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+import * as React from "react";
 
-type ImageSize = "sm" | "md" | "lg" | "xl";
+const displayNameAvatar = "Avatar";
+const displayNameAvatarImage = "AvatarImage";
+const displayNameAvatarFallback = "AvatarFallback";
 
-export interface AvatarProps extends Omit<HTMLProps<HTMLElement>, "as" | "size"> {
-  src: string;
-  alt: string;
-  size?: ImageSize | number;
-  text?: string;
-  children?: ReactNode;
-  className?: string;
-  as?: ElementType;
-}
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { [displayNameAvatar]: Component = DefaultComponent } = useStackShiftUIComponents();
 
-const displayName = "Avatar";
-
-export const Avatar: React.FC<AvatarProps> = ({
-  src,
-  alt = "image",
-  size = "sm",
-  text,
-  children,
-  className,
-  as,
-  ...props
-}) => {
-  const components = useStackShiftUIComponents();
-  const { [displayName]: Component = DefaultComponent } = components;
+  return (
+    <Component
+      as={AvatarPrimitive.Root}
+      ref={ref}
+      className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+      {...props}
+    />
+  );
+});
+Avatar.displayName = displayNameAvatar;
 
-  const [loaded, setLoaded] = useState(false);
-  const sizeMap = {
-    sm: 40,
-    md: 80,
-    lg: 120,
-    xl: 160,
-  };
-  const avatarSize = typeof size === "number" ? `${size}px` : `${sizeMap[size]}px`;
-  const initials = text ? text?.split(" ")?.reduce((acc, curr) => acc + curr[0], "") : "AB";
-  const baseClass = `relative flex rounded-full aspect-square overflow-hidden border-2 border-solid border-primary`;
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => {
+  const { [displayNameAvatarImage]: Component = DefaultComponent } = useStackShiftUIComponents();
 
   return (
     <Component
-      as={as}
-      className={cn(baseClass, className)}
-      style={{ maxWidth: avatarSize }}
+      as={AvatarPrimitive.Image}
+      ref={ref}
+      className={cn("aspect-square h-full w-full", className)}
       {...props}
-      data-testid={displayName}>
-      {(!loaded || !src) && (
-        <Flex align="center" justify="center" className="w-full h-full bg-primary">
-          <p
-            style={{
-              fontSize: `calc(${avatarSize}/2)`,
-            }}
-            className="text-white">
-            {initials}
-          </p>
-        </Flex>
-      )}
-      {src && (
-        <Image
-          className="object-cover object-center w-[100%] h-[100%]"
-          src={src}
-          alt={alt}
-          width={100}
-          height={100}
-          onLoad={() => setLoaded(true)}
-        />
+    />
+  );
+});
+AvatarImage.displayName = displayNameAvatarImage;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => {
+  const { [displayNameAvatarFallback]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={AvatarPrimitive.Fallback}
+      ref={ref}
+      className={cn(
+        "flex h-full w-full items-center justify-center rounded-full bg-muted",
+        className,
       )}
-    </Component>
+      {...props}
+    />
   );
-};
+});
+AvatarFallback.displayName = displayNameAvatarFallback;
+
+export { Avatar, AvatarFallback, AvatarImage };

package/src/setupTests.ts

@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom';
+
+export { };
+