style: new avatar and avatar group components (#2584)

* style: new avatar components

* chore: bug fixes

* chore: add pixel to size

* chore: add comments to helper functions

* fix: build errors

web/components/modules/module-card-item.tsx

@@ -9,8 +9,7 @@ import useToast from "hooks/use-toast";
 // components
 import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
 // ui
-import { AssigneesList } from "components/ui";
-import { CustomMenu, LayersIcon, Tooltip } from "@plane/ui";
+import { Avatar, AvatarGroup, CustomMenu, LayersIcon, Tooltip } from "@plane/ui";
 // icons
 import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
 // helpers
@@ -164,7 +163,11 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
               {module.members_detail.length > 0 && (
                 <Tooltip tooltipContent={`${module.members_detail.length} Members`}>
                   <div className="flex items-center gap-1 cursor-default">
-                    <AssigneesList users={module.members_detail} length={3} />
+                    <AvatarGroup showTooltip={false}>
+                      {module.members_detail.map((member) => (
+                        <Avatar key={member.id} name={member.display_name} src={member.avatar} />
+                      ))}
+                    </AvatarGroup>
                   </div>
                 </Tooltip>
               )}

web/components/modules/module-list-item.tsx

@@ -9,8 +9,7 @@ import useToast from "hooks/use-toast";
 // components
 import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
 // ui
-import { AssigneesList } from "components/ui";
-import { CircularProgressIndicator, CustomMenu, Tooltip } from "@plane/ui";
+import { Avatar, AvatarGroup, CircularProgressIndicator, CustomMenu, Tooltip } from "@plane/ui";
 // icons
 import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
 // helpers
@@ -174,7 +173,11 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
             <Tooltip tooltipContent={`${module.members_detail.length} Members`}>
               <div className="flex items-center justify-center gap-1 cursor-default w-16">
                 {module.members_detail.length > 0 ? (
-                  <AssigneesList users={module.members_detail} length={2} />
+                  <AvatarGroup showTooltip={false}>
+                    {module.members_detail.map((member) => (
+                      <Avatar key={member.id} name={member.display_name} src={member.avatar} />
+                    ))}
+                  </AvatarGroup>
                 ) : (
                   <span className="flex items-end justify-center h-5 w-5 bg-custom-background-80 rounded-full border border-dashed border-custom-text-400">
                     <User2 className="h-4 w-4 text-custom-text-400" />

web/components/modules/select/lead.tsx

@@ -4,8 +4,7 @@ import useSWR from "swr";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { Avatar } from "components/ui";
-import { CustomSearchSelect } from "@plane/ui";
+import { Avatar, CustomSearchSelect } from "@plane/ui";
 // icons
 import { UserCircle } from "lucide-react";
 // fetch-keys
@@ -34,7 +33,7 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
     query: member.member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
         {member.member.display_name}
       </div>
     ),
@@ -48,7 +47,11 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
       value={value}
       label={
         <div className="flex items-center gap-2">
-          {selectedOption ? <Avatar user={selectedOption} /> : <UserCircle className="h-4 w-4 text-custom-text-200" />}
+          {selectedOption ? (
+            <Avatar name={selectedOption.display_name} src={selectedOption.avatar} />
+          ) : (
+            <UserCircle className="h-4 w-4 text-custom-text-200" />
+          )}
           {selectedOption ? selectedOption?.display_name : <span className="text-custom-text-200">Lead</span>}
         </div>
       }

web/components/modules/select/members.tsx

@@ -4,9 +4,7 @@ import useSWR from "swr";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { AssigneesList, Avatar } from "components/ui";
-// icons
-import { CustomSearchSelect, UserGroupIcon } from "@plane/ui";
+import { Avatar, AvatarGroup, CustomSearchSelect, UserGroupIcon } from "@plane/ui";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -32,7 +30,7 @@ export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
     query: member.member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
         {member.member.display_name}
       </div>
     ),
@@ -45,7 +43,15 @@ export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
         <div className="flex items-center gap-2 text-custom-text-200">
           {value && value.length > 0 && Array.isArray(value) ? (
             <div className="flex items-center justify-center gap-2">
-              <AssigneesList userIds={value} length={3} showLength={false} />
+              <AvatarGroup>
+                {value.map((assigneeId) => {
+                  const member = members?.find((m) => m.member.id === assigneeId)?.member;
+
+                  if (!member) return null;
+
+                  return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
+                })}
+              </AvatarGroup>
               <span className="text-custom-text-200">{value.length} Assignees</span>
             </div>
           ) : (

web/components/modules/sidebar-select/select-lead.tsx

@@ -4,8 +4,7 @@ import useSWR from "swr";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { Avatar } from "components/ui";
-import { CustomSearchSelect } from "@plane/ui";
+import { Avatar, CustomSearchSelect } from "@plane/ui";
 // icons
 import { ChevronDown, UserCircle2 } from "lucide-react";
 // fetch-keys
@@ -36,7 +35,7 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
     query: member.member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} height="18px" width="18px" />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
         {member.member.display_name}
       </div>
     ),
@@ -58,7 +57,7 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
           customButton={
             selectedOption ? (
               <div className="flex items-center justify-start gap-2 p-0.5 w-full">
-                <Avatar user={selectedOption} />
+                <Avatar name={selectedOption.display_name} src={selectedOption.avatar} />
                 <span className="text-sm text-custom-text-200">{selectedOption?.display_name}</span>
               </div>
             ) : (

web/components/modules/sidebar-select/select-members.tsx

@@ -1,14 +1,10 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
 import { ProjectService } from "services/project";
 // ui
-import { AssigneesList, Avatar } from "components/ui";
-import { CustomSearchSelect, UserGroupIcon } from "@plane/ui";
+import { Avatar, AvatarGroup, CustomSearchSelect, UserGroupIcon } from "@plane/ui";
 // icons
 import { ChevronDown } from "lucide-react";
 // fetch-keys
@@ -38,7 +34,7 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
     query: member.member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} height="18px" width="18px" />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} showTooltip={false} />
         {member.member.display_name}
       </div>
     ),
@@ -57,8 +53,16 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
           customButtonClassName="rounded-sm"
           customButton={
             value && value.length > 0 && Array.isArray(value) ? (
-              <div className="flex items-center gap-2 p-0.5 w-full">
-                <AssigneesList userIds={value} length={2} />
+              <div className="px-1">
+                <AvatarGroup showTooltip={false}>
+                  {value.map((assigneeId) => {
+                    const member = members?.find((m) => m.member.id === assigneeId)?.member;
+
+                    if (!member) return null;
+
+                    return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
+                  })}
+                </AvatarGroup>
               </div>
             ) : (
               <div className="group flex items-center justify-between gap-2 p-1 text-sm text-custom-text-400 w-full">