internal - manually checkout head to solve CI issues

teambit · Jan 6, 2025 · 8b75c01 · 8b75c01
1 parent eae002d
commit 8b75c01
Show file tree

Hide file tree

Showing 7 changed files with 274 additions and 180 deletions.
diff --git a/.bitmap b/.bitmap
@@ -1853,7 +1853,7 @@
     "ui/avatar": {
         "name": "ui/avatar",
         "scope": "teambit.design",
-        "version": "1.0.35",
+        "version": "1.1.0",
         "mainFile": "index.ts",
         "rootDir": "components/ui/avatar"
     },

diff --git a/components/ui/avatar/avatar.compositions.tsx b/components/ui/avatar/avatar.compositions.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { DefaultAvatar, OrgAvatar, UserAvatar } from './index';
+import { AccountDescriptor } from '@teambit/accounts.account-descriptor';
+import { DefaultAvatar, OrgAvatar, UserAvatar, Avatar } from './index';
 
 const accounts = {
   defAccount: {
@@ -23,6 +24,41 @@ const accounts = {
   noNameAccount: { name: '', type: 'user' },
 };
 
+export const BasicAvatarExample = () => (
+  <div
+    style={{
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      gap: 16,
+      margin: '12px auto',
+    }}
+  >
+    <Avatar />
+    <Avatar
+      account={AccountDescriptor.fromObject({
+        id: '',
+        image:
+          'https://bitsrc.imgix.net/dfed500a7cfd20263860c20f4e786e2ff7e7645c.jpeg?size=32&w=64&h=64&crop=faces&fit=crop&bg=ededed',
+        name: 'joshk2',
+        displayName: 'Josh Kuttler',
+        type: 'user',
+        entity: '{}',
+      })}
+    />
+    <Avatar
+      account={AccountDescriptor.fromObject({
+        id: '',
+        image: 'https://bitsrc.imgix.net/102fee41d005d76010a8b16f466b13cc75d870d6.png?h=192',
+        name: 'teambit',
+        displayName: 'teambit',
+        type: 'org',
+        entity: '{}',
+      })}
+    />
+  </div>
+);
+
 export const DefaultAvatarExample = () => <DefaultAvatar />;
 
 export const OrganizationAvatarExample = () => <OrgAvatar size={32} account={accounts.orgAccount} />;

diff --git a/components/ui/avatar/avatar.tsx b/components/ui/avatar/avatar.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-
+import { AccountDescriptor } from '@teambit/accounts.account-descriptor';
+import type { Placement as TooltipPlacement } from '@teambit/design.ui.tooltip';
 import { DefaultAvatar } from './default-avatar';
 import { OrgAvatar } from './org-avatar';
 import { UserAvatar } from './user-avatar';
@@ -18,24 +19,26 @@ export type AccountObj = {
 };
 
 type AvatarProps = {
-  account: AccountObj;
-  size: number;
+  account?: AccountDescriptor;
+  size?: number;
   imageSize?: number;
   fontSize?: number;
   className?: string;
   imgClassName?: string;
   showTooltip?: boolean;
+  tooltipPlacement?: TooltipPlacement;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-export default function Avatar(props: AvatarProps) {
-  const { account } = props;
+export function Avatar({ account, ...rest }: AvatarProps) {
+  if (!account) return <DefaultAvatar {...rest} />;
+  const { type, name, displayName, image } = account;
+  const accountObj: AccountObj = {
+    name,
+    displayName,
+    profileImage: image,
+  };
 
-  switch (account.accountType) {
-    case AccountTypes.user:
-      return <UserAvatar {...props} />;
-    case AccountTypes.org:
-      return <OrgAvatar {...props} />;
-    default:
-      return <DefaultAvatar {...props} />;
-  }
+  if (type === 'user') return <UserAvatar account={accountObj} {...rest} />;
+  if (type === 'org') return <OrgAvatar account={accountObj} {...rest} />;
+  return <DefaultAvatar {...rest} />;
 }
diff --git a/components/ui/avatar/index.ts b/components/ui/avatar/index.ts
@@ -1,4 +1,5 @@
-export * from './avatar';
+export { Avatar } from './avatar';
+export type { AccountTypes, AccountObj } from './avatar';
 export { UserAvatar } from './user-avatar';
 export type { UserAvatarProps } from './user-avatar';
 export { OrgAvatar } from './org-avatar';

diff --git a/components/ui/avatar/org-avatar.tsx b/components/ui/avatar/org-avatar.tsx
@@ -31,7 +31,7 @@ export function OrgAvatar({
   return (
     <div
       className={classNames(styles.default, styles.avatar, className)}
-      style={{ width: `${size}px`, height: `${size}px` }}
+      style={{ minWidth: `${size}px`, width: `${size}px`, height: `${size}px` }}
       {...rest}
     >
       {profileImageWithParams && (

diff --git a/components/ui/avatar/user-avatar.tsx b/components/ui/avatar/user-avatar.tsx
@@ -12,7 +12,7 @@ import styles from './styles.module.scss';
 
 export type UserAvatarProps = {
   account: AccountObj;
-  size: number;
+  size?: number;
   imageSize?: number;
   fontSize?: number;
   imgClassName?: string;
@@ -25,7 +25,7 @@ export type UserAvatarProps = {
 
 export function UserAvatar({
   account,
-  size,
+  size = 32,
   imageSize = size,
   fontSize = Math.round(size * 0.4),
   className,