Merge pull request #20 from code4rena-dev/samus/avatar-component-12

Add avatar component

Author: SamusElderg

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@code4rena/components-library",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "Code4rena's official components library ",
   "types": "./dist/lib.d.ts",
   "exports": {
@@ -71,7 +71,6 @@
     "container-query-polyfill": "^1.0.2",
     "date-fns": "^2.30.0",
     "luxon": "^3.3.0",
-    "react-avatar": "^5.0.3",
     "react-select": "^5.7.4"
   },
   "peerDependencies": {
@@ -85,4 +84,4 @@
       "@babel/preset-react"
     ]
   }
-}
+}

package.json

@@ -0,0 +1,36 @@
+.avatar {
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    vertical-align: middle;
+  
+    .avatar__image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+    }
+  
+    .avatar__initials {
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+  
+      .avatar__initials-text {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        color: #fff;
+        font-weight: 600;
+      }
+    }
+  }
+  
+  .widget__avatar-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+  

src/lib/Avatar/Avatar.scss

@@ -0,0 +1,31 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import { Avatar } from "./Avatar";
+
+const meta: Meta<typeof Avatar> = {
+  component: Avatar,
+  title: "Avatar",
+  tags: ["autodocs"],
+  argTypes: {
+    size: { control: "number" },
+    round: { control: "number" },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const ImageAvatar: Story = (args) => <Avatar {...args} />;
+ImageAvatar.args = {
+  imgElement: <img src="/images/default-avatar.png" alt="Placeholder" />,
+  name: "0xJohnWithALongName",
+  size: 50,
+  round: 25,
+};
+
+export const InitialsAvatar: Story = (args) => <Avatar {...args} />;
+InitialsAvatar.args = {
+  name: "John-With-A-Long-Name",
+  size: 50,
+  round: 25,
+};

src/lib/Avatar/Avatar.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Avatar } from "./Avatar";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+const defaultArgs = {
+  name: "John Doe",
+  size: 50,
+  round: 25,
+};
+
+describe("========== Avatar Component - RUNNING TESTS ==========", () => {
+  test("Renders with image avatar", () => {
+    const imgElement = (
+      <img src="/images/default-avatar.png" alt="Placeholder" />
+    );
+    render(<Avatar imgElement={imgElement} {...defaultArgs} />);
+    const avatar = screen.getByRole("img");
+    expect(avatar).toHaveAttribute("src", "/images/default-avatar.png");
+  });
+
+  test("Renders with initials avatar", () => {
+    render(<Avatar {...defaultArgs} />);
+    const avatar = screen.getByText("JD");
+    expect(avatar).toBeInTheDocument();
+  });
+
+  test("Sets alt text for image avatar", () => {
+    const imgElement = (
+      <img src="/images/default-avatar.png" alt="User avatar" />
+    );
+    render(<Avatar imgElement={imgElement} {...defaultArgs} />);
+    const avatar = screen.getByAltText("User avatar");
+    expect(avatar).toBeInTheDocument();
+  });
+});

src/lib/Avatar/Avatar.test.tsx

@@ -0,0 +1,109 @@
+import React, { cloneElement } from "react";
+import { AvatarProps } from "./Avatar.types";
+import "./Avatar.scss";
+
+// Parse the initials of the user from their name
+const parseInitials = (name: string) => {
+  if (!name) return "✷"; // If no name then return "✷"
+  if (name.length <= 2) return name; // If name is 2 characters or less then return it whole
+  if (name.substring(0, 2).toLowerCase() === "0x") name = name.substring(2); // If starts with "0x" then remove it
+  let nameArray = name.split(" "); // Initials by 'space' separator
+  if (nameArray.length <= 1) nameArray = name.split("."); // Initials by 'dot' separator
+  if (nameArray.length <= 1) nameArray = name.split("_"); // Initials by 'underscore' separator
+  if (nameArray.length <= 1) nameArray = name.split("-"); // Initials by 'dash' separator
+  if (nameArray.length <= 1) {
+    const nameString = name.replace(/([A-Z])/g, " $1").trim(); // Initials by case-change
+    nameArray = nameString.split(" ");
+  }
+  if (nameArray.length <= 1) return name.substring(0, 1); // Fallback to first letter of name
+  return `${nameArray[0].substring(0, 1)}${nameArray[1].substring(0, 1)}`;
+};
+
+// Array of dark pastel colors suitable as bg for the white initials
+const pastelColors = [
+  "#9B4DCA",
+  "#8E44AD",
+  "#2980B9",
+  "#3498DB",
+  "#1ABC9C",
+  "#16A085",
+  "#27AE60",
+  "#2ECC71",
+  "#F1C40F",
+  "#F39C12",
+  "#E67E22",
+  "#D35400",
+  "#E74C3C",
+  "#C0392B",
+  "#EC407A",
+  "#D81B60",
+  "#8E24AA",
+  "#6A1B9A",
+  "#4A148C",
+  "#4527A0",
+];
+
+// Generate a random color from the name string
+const generateColor = (str: string) => {
+  const index = str.length % pastelColors.length;
+  return pastelColors[index];
+};
+
+/**
+ * A stylized Avatar component for displaying user avatars.
+ * This component supports displaying an image avatar or a fallback avatar with initials.
+ * The fallback avatar is a colored circle with the user's initials.
+ *
+ * @param imgElement - An optional image element to use as the avatar.
+ * @param name - The name of the user. Used to generate initials for the fallback avatar.
+ * @param size - The size of the avatar in pixels.
+ * @param round - The border-radius of the avatar in pixels. Use this to make the avatar round.
+ */
+export const Avatar: React.FC<AvatarProps> = ({
+  imgElement,
+  name,
+  size,
+  round,
+}) => {
+  const clonedImgElement = imgElement
+    ? cloneElement(imgElement, {
+        className: "avatar__image",
+        width: size,
+        height: size,
+      })
+    : null;
+
+  return (
+    <div
+      className={"avatar"}
+      style={{
+        borderRadius: round ? `${round}px` : "none",
+        width: `${size}px`,
+        height: `${size}px`,
+      }}
+    >
+      {clonedImgElement ? (
+        clonedImgElement
+      ) : (
+        <div
+          className={"avatar__initials"}
+          style={{
+            width: `${size}px`,
+            height: `${size}px`,
+            backgroundColor: generateColor(name),
+          }}
+        >
+          <span
+            className={"avatar__initials-text"}
+            style={{
+              lineHeight: `${size}px`,
+              fontSize: `${size * 0.45}px`,
+            }}
+          >
+            {parseInitials(name)}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};

src/lib/Avatar/Avatar.tsx

@@ -0,0 +1,6 @@
+export interface AvatarProps {
+  imgElement?: JSX.Element;
+  name: string;
+  size: number;
+  round?: number;
+}

src/lib/Avatar/Avatar.types.ts

@@ -0,0 +1 @@
+export * from "./Avatar";

src/lib/Avatar/index.ts

@@ -6,9 +6,9 @@ import walletConnectIcon from "../../../public/logos/wallet-connect-logo.svg";
 import c4LogoIcon from "../../../public/logos/c4-logo.svg";
 import registerIcon from "../../../public/icons/register.svg";
 import { Dropdown } from "../Dropdown/Dropdown";
-import Avatar from "react-avatar";
 import { ModalProps, NavBarProps, Web3ProviderType } from "./NavBar.types";
 import "./NavBar.scss";
+import { Avatar } from "../Avatar";
 
 const UserDropdown = ({
   userImage = "/",
@@ -20,7 +20,12 @@ const UserDropdown = ({
   logoutHandler: () => void;
 }) => {
   const avatar = () => (
-    <Avatar src={userImage} name={username} size="30px" round={true} />
+    <Avatar
+      imgElement={userImage ? <img src={userImage} alt={username} /> : undefined}
+      name={username}
+      size={30}
+      round={30}
+    />
   );
 
   const children = (

src/lib/NavBar/NavBar.tsx

@@ -1,10 +1,11 @@
 export * from "./Alert";
+export * from "./Avatar";
 export * from "./Button";
+export * from "./Card";
 export * from "./ContestStatus";
 export * from "./ContestTile";
 export * from "./Dropdown";
 export * from "./EyebrowBar";
 export * from "./Input";
 export * from "./NavBar";
-export * from "./Tag";
-export * from "./Card";
+export * from "./Tag";