From 63e997dbf706e4effe95aea95193f04ea8ccf91c Mon Sep 17 00:00:00 2001
From: tsumo <tsumo@users.noreply.github.com>
Date: Tue, 8 Aug 2023 17:58:53 +0300
Subject: [PATCH] feat(UserGroup): use component from bricks

---
 package-lock.json            |  14 ++--
 package.json                 |   2 +-
 src/components/UserGroup.tsx | 126 ++---------------------------------
 3 files changed, 15 insertions(+), 127 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b552481b3..18216fcfd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@sentry/nextjs": "7.60.0",
         "@tanstack/react-query": "4.29.5",
         "@tanstack/react-query-devtools": "4.29.5",
-        "@taskany/bricks": "1.28.0",
+        "@taskany/bricks": "1.29.0",
         "@taskany/colors": "1.1.0",
         "@taskany/icons": "1.0.0",
         "@tippyjs/react": "4.2.6",
@@ -6036,9 +6036,9 @@
       }
     },
     "node_modules/@taskany/bricks": {
-      "version": "1.28.0",
-      "resolved": "https://registry.npmjs.org/@taskany/bricks/-/bricks-1.28.0.tgz",
-      "integrity": "sha512-KmrHora/Qzl2UyuPv+gDzJDYtgJE7grtkz71cB7zZmZ7a8wgXGovVhOglf44GQeFRHE2isDh2PkhBX5S+6P0aQ==",
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/@taskany/bricks/-/bricks-1.29.0.tgz",
+      "integrity": "sha512-w6PwjCNOHfu1G1ioVG25um5aGX8EHCQsaJy+G+erDJg/X3BQyKSEdgetwLpMmtRgmj+burd6iwgjESNfOwNDJw==",
       "dependencies": {
         "@monaco-editor/react": "4.5.1",
         "@taskany/colors": "1.1.0",
@@ -23225,9 +23225,9 @@
       }
     },
     "@taskany/bricks": {
-      "version": "1.28.0",
-      "resolved": "https://registry.npmjs.org/@taskany/bricks/-/bricks-1.28.0.tgz",
-      "integrity": "sha512-KmrHora/Qzl2UyuPv+gDzJDYtgJE7grtkz71cB7zZmZ7a8wgXGovVhOglf44GQeFRHE2isDh2PkhBX5S+6P0aQ==",
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/@taskany/bricks/-/bricks-1.29.0.tgz",
+      "integrity": "sha512-w6PwjCNOHfu1G1ioVG25um5aGX8EHCQsaJy+G+erDJg/X3BQyKSEdgetwLpMmtRgmj+burd6iwgjESNfOwNDJw==",
       "requires": {
         "@monaco-editor/react": "4.5.1",
         "@taskany/colors": "1.1.0",
diff --git a/package.json b/package.json
index 5d5b9f388..9e299f970 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "@sentry/nextjs": "7.60.0",
     "@tanstack/react-query": "4.29.5",
     "@tanstack/react-query-devtools": "4.29.5",
-    "@taskany/bricks": "1.28.0",
+    "@taskany/bricks": "1.29.0",
     "@taskany/colors": "1.1.0",
     "@taskany/icons": "1.0.0",
     "@tippyjs/react": "4.2.6",
diff --git a/src/components/UserGroup.tsx b/src/components/UserGroup.tsx
index efe40b832..42fd41cf0 100644
--- a/src/components/UserGroup.tsx
+++ b/src/components/UserGroup.tsx
@@ -1,125 +1,13 @@
-import { FC, useMemo } from 'react';
-import styled, { css } from 'styled-components';
-import dynamic from 'next/dynamic';
-import { UserPic, Text } from '@taskany/bricks';
-import { gapSm, gray4, gray9, gray6, radiusL, radiusXl } from '@taskany/colors';
+import { ComponentProps, useMemo } from 'react';
+import { UserGroup as UserGroupBricks } from '@taskany/bricks';
 
 import { ActivityByIdReturnType } from '../../trpc/inferredTypes';
 
-const Popup = dynamic(() => import('@taskany/bricks/components/Popup'));
-
-const hoverCss = css`
-    z-index: 1;
-    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.08));
-`;
-
-const UserGroupContainer = styled.div`
-    display: inline-flex;
-`;
-
-const UserContainer = styled.div`
-    border-radius: 100%;
-    border: 1px solid ${gray4};
-
-    & + & {
-        margin-left: calc(${gapSm} * -1);
-    }
-
-    &:hover {
-        ${hoverCss};
-    }
-`;
-
-const UserImage = styled(UserPic)`
-    display: block;
-`;
-
-const StyledCounter = styled.div`
-    min-width: 0.75rem;
-    padding: 0px 5px;
-    margin: 2px 0px;
-    border-radius: ${radiusL};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: ${gray4};
-    position: relative;
-    right: 10px;
-
-    &:hover {
-        ${hoverCss};
-    }
-`;
-const StyledSmallCircle = styled.div`
-    width: 0.7rem;
-    height: 0.7rem;
-    border-radius: ${radiusXl};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: ${gray6};
-    position: relative;
-    right: 15px;
-    transform: translateY(8px);
-`;
-
-export const UserGroup: FC<{
+interface UserGroupProps extends ComponentProps<typeof UserGroupBricks> {
     users: NonNullable<ActivityByIdReturnType>[];
-    className?: string;
-    size?: number;
-    limit?: number;
-}> = ({ users, className, size = 24, limit = 3 }) => {
-    const showCounter = users.length > limit;
-    const items = users.slice(0, showCounter ? limit : users.length);
-
-    const counterUsersList = useMemo(() => {
-        return users.reduce((acc, { user }, index) => {
-            if (index < limit || !user?.name) return acc;
-
-            acc += acc ? `, ${user.name}` : user.name;
-            return acc;
-        }, '');
-    }, [limit, users]);
+}
 
-    return (
-        <UserGroupContainer className={className}>
-            {items.map(({ user, ghost }, i) => (
-                <Popup
-                    key={i}
-                    target={
-                        <UserContainer>
-                            <UserImage src={user?.image} email={user?.email || ghost?.email} size={size} />
-                        </UserContainer>
-                    }
-                    tooltip
-                    placement="top"
-                >
-                    {user?.name}
-                </Popup>
-            ))}
-            {showCounter && (
-                <>
-                    <Popup
-                        target={
-                            <StyledCounter>
-                                <Text color={gray9} size="xs">
-                                    {users.length - limit}
-                                </Text>
-                            </StyledCounter>
-                        }
-                        tooltip
-                        maxWidth={420}
-                        placement="top"
-                    >
-                        {counterUsersList}
-                    </Popup>
-                    <StyledSmallCircle>
-                        <Text color={gray9} size="xxs" as="span">
-                            +
-                        </Text>
-                    </StyledSmallCircle>
-                </>
-            )}
-        </UserGroupContainer>
-    );
+export const UserGroup = ({ users, ...rest }: UserGroupProps) => {
+    const extractedUsers = useMemo(() => users.map((a) => a.user || a.ghost).filter(Boolean) ?? [], [users]);
+    return <UserGroupBricks users={extractedUsers} {...rest} />;
 };