refactor: use radix ui on workspace avatar (#1819)

apps/electron/yarn.lock

@@ -49,6 +49,7 @@ __metadata:
     "@mui/base": 5.0.0-alpha.124
     "@mui/icons-material": ^5.11.16
     "@mui/material": ^5.11.16
+    "@radix-ui/react-avatar": ^1.0.2
     "@storybook/addon-actions": ^7.0.2
     "@storybook/addon-coverage": ^0.0.8
     "@storybook/addon-essentials": ^7.0.2
@@ -1633,7 +1634,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
   version: 7.21.0
   resolution: "@babel/runtime@npm:7.21.0"
   dependencies:
@@ -4006,6 +4007,91 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-avatar@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "@radix-ui/react-avatar@npm:1.0.2"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-context": 1.0.0
+    "@radix-ui/react-primitive": 1.0.2
+    "@radix-ui/react-use-callback-ref": 1.0.0
+    "@radix-ui/react-use-layout-effect": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: 5351bd8763b1d0f2450e79a443b8525a652c89921321c25b93afad666b56a7eb00fcedfc801d5f284c78a7cbebea658f04e4fee6d305d7def57a562d9518dbdb
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-compose-refs@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-compose-refs@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: fb98be2e275a1a758ccac647780ff5b04be8dcf25dcea1592db3b691fecf719c4c0700126da605b2f512dd89caa111352b9fad59528d736b4e0e9a0e134a74a1
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-context@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-context@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: 43c6b6f2183398161fe6b109e83fff240a6b7babbb27092b815932342a89d5ca42aa9806bfae5927970eed5ff90feed04c67aa29c6721f84ae826f17fcf34ce0
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-primitive@npm:1.0.2":
+  version: 1.0.2
+  resolution: "@radix-ui/react-primitive@npm:1.0.2"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-slot": 1.0.1
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: 070b1770749eb629425ef959c4cdbd86957b83c5286ae4423e55ab1a89fa286a51f5aeee44e3a13eb6ca44771415ac1acbaeb0ba03013b49ecb5253e1a5a8996
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-slot@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-slot@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-compose-refs": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: a20693f8ce532bd6cbff12ba543dfcf90d451f22923bd60b57dc9e639f6e53348915e182002b33444feb6ab753434e78e2a54085bf7092aadda4418f0423763f
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-callback-ref@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-use-callback-ref@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: a8dda76ba0a26e23dc6ab5003831ad7439f59ba9d696a517643b9ee6a7fb06b18ae7a8f5a3c00c530d5c8104745a466a077b7475b99b4c0f5c15f5fc29474471
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-layout-effect@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-use-layout-effect@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: fcdc8cfa79bd45766ebe3de11039c58abe3fed968cb39c12b2efce5d88013c76fe096ea4cee464d42576d02fe7697779b682b4268459bca3c4e48644f5b4ac5e
+  languageName: node
+  linkType: hard
+
 "@react-dnd/asap@npm:^5.0.1":
   version: 5.0.2
   resolution: "@react-dnd/asap@npm:5.0.2"

packages/component/package.json

@@ -29,6 +29,7 @@
     "@mui/base": "5.0.0-alpha.124",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.11.16",
+    "@radix-ui/react-avatar": "^1.0.2",
     "@toeverything/hooks": "workspace:*",
     "clsx": "^1.2.1",
     "lit": "^2.7.1",

packages/component/src/components/workspace-avatar/index.css.ts

@@ -1,5 +1,7 @@
 import { style } from '@vanilla-extract/css';
 export const avatarStyle = style({
+  width: '100%',
+  height: '100%',
   color: '#fff',
   borderRadius: '50%',
   overflow: 'hidden',
@@ -7,8 +9,18 @@ export const avatarStyle = style({
   verticalAlign: 'middle',
 });
 
+export const avatarImageStyle = style({
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  objectPosition: 'center',
+});
+
 export const avatarTextStyle = style({
+  width: '100%',
+  height: '100%',
   border: '1px solid #fff',
+  textAlign: 'center',
   color: '#fff',
   borderRadius: '50%',
   display: 'inline-flex',

packages/component/src/components/workspace-avatar/index.tsx

@@ -1,11 +1,12 @@
 import type { AffineWorkspace, LocalWorkspace } from '@affine/workspace/type';
 import type { Workspace } from '@blocksuite/store';
+import * as RadixAvatar from '@radix-ui/react-avatar';
 import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-blocksuite-workspace-avatar-url';
+import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-blocksuite-workspace-name';
 import clsx from 'clsx';
 import type React from 'react';
-import { memo } from 'react';
 
-import { avatarStyle, avatarTextStyle } from './index.css';
+import { avatarImageStyle, avatarStyle, avatarTextStyle } from './index.css';
 
 function stringToColour(str: string) {
   str = str || 'affine';
@@ -28,61 +29,6 @@ function stringToColour(str: string) {
   return colour;
 }
 
-interface AvatarProps {
-  size: number;
-  name: string;
-  avatar_url: string;
-  className?: string;
-}
-
-export const Avatar: React.FC<AvatarProps> = memo<AvatarProps>(function Avatar({
-  size: _size,
-  avatar_url,
-  name,
-  ...props
-}) {
-  const size = _size || 20;
-  const sizeStr = size + 'px';
-
-  return (
-    <>
-      {avatar_url ? (
-        <div
-          {...props}
-          className={clsx(avatarStyle, props.className)}
-          style={{
-            width: sizeStr,
-            height: sizeStr,
-          }}
-        >
-          <picture>
-            <img
-              width={size}
-              height={size}
-              src={avatar_url}
-              alt=""
-              referrerPolicy="no-referrer"
-            />
-          </picture>
-        </div>
-      ) : (
-        <div
-          {...props}
-          className={avatarTextStyle}
-          style={{
-            width: sizeStr,
-            height: sizeStr,
-            fontSize: Math.ceil(0.5 * size) + 'px',
-            background: stringToColour(name || 'AFFiNE'),
-          }}
-        >
-          {(name || 'AFFiNE').substring(0, 1)}
-        </div>
-      )}
-    </>
-  );
-});
-
 export type WorkspaceAvatarProps = {
   size?: number;
   workspace: LocalWorkspace | AffineWorkspace | null;
@@ -97,19 +43,32 @@ export type BlockSuiteWorkspaceAvatar = Omit<
 };
 
 export const BlockSuiteWorkspaceAvatar: React.FC<BlockSuiteWorkspaceAvatar> = ({
-  size = 20,
+  size,
   workspace,
   ...props
 }) => {
   const [avatar] = useBlockSuiteWorkspaceAvatarUrl(workspace);
+  const [name] = useBlockSuiteWorkspaceName(workspace);
 
   return (
-    <Avatar
+    <RadixAvatar.Root
       {...props}
-      size={size}
+      className={clsx(avatarStyle, props.className)}
-      name={workspace.meta.name ?? 'Untitled'}
+      style={{
-      avatar_url={avatar ?? ''}
+        height: size,
-    />
+        width: size,
+      }}
+    >
+      <RadixAvatar.Image className={avatarImageStyle} src={avatar} alt={name} />
+      <RadixAvatar.Fallback
+        className={avatarTextStyle}
+        style={{
+          backgroundColor: stringToColour(name),
+        }}
+      >
+        {name.substring(0, 1)}
+      </RadixAvatar.Fallback>
+    </RadixAvatar.Root>
   );
 };
 
@@ -127,5 +86,23 @@ export const WorkspaceAvatar: React.FC<WorkspaceAvatarProps> = ({
       />
     );
   }
-  return <Avatar {...props} size={size} name="UNKNOWN" avatar_url="" />;
+  return (
+    <RadixAvatar.Root
+      {...props}
+      className={clsx(avatarStyle, props.className)}
+      style={{
+        height: size,
+        width: size,
+      }}
+    >
+      <RadixAvatar.Fallback
+        className={avatarTextStyle}
+        style={{
+          backgroundColor: stringToColour('A'),
+        }}
+      >
+        A
+      </RadixAvatar.Fallback>
+    </RadixAvatar.Root>
+  );
 };

packages/component/src/stories/WorkspaceAvatar.stories.tsx

@@ -77,3 +77,11 @@ export const BlobExample: StoryFn<WorkspaceAvatarProps> = props => {
 BlobExample.args = {
   size: 40,
 };
+
+export const Empty: StoryFn<WorkspaceAvatarProps> = props => {
+  return <WorkspaceAvatar {...props} workspace={null} />;
+};
+
+Empty.args = {
+  size: 40,
+};

yarn.lock

@@ -49,6 +49,7 @@ __metadata:
     "@mui/base": 5.0.0-alpha.124
     "@mui/icons-material": ^5.11.16
     "@mui/material": ^5.11.16
+    "@radix-ui/react-avatar": ^1.0.2
     "@storybook/addon-actions": ^7.0.2
     "@storybook/addon-coverage": ^0.0.8
     "@storybook/addon-essentials": ^7.0.2
@@ -4141,6 +4142,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-avatar@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "@radix-ui/react-avatar@npm:1.0.2"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-context": 1.0.0
+    "@radix-ui/react-primitive": 1.0.2
+    "@radix-ui/react-use-callback-ref": 1.0.0
+    "@radix-ui/react-use-layout-effect": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: 5351bd8763b1d0f2450e79a443b8525a652c89921321c25b93afad666b56a7eb00fcedfc801d5f284c78a7cbebea658f04e4fee6d305d7def57a562d9518dbdb
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-compose-refs@npm:1.0.0":
   version: 1.0.0
   resolution: "@radix-ui/react-compose-refs@npm:1.0.0"
@@ -4284,6 +4301,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-primitive@npm:1.0.2":
+  version: 1.0.2
+  resolution: "@radix-ui/react-primitive@npm:1.0.2"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-slot": 1.0.1
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: 070b1770749eb629425ef959c4cdbd86957b83c5286ae4423e55ab1a89fa286a51f5aeee44e3a13eb6ca44771415ac1acbaeb0ba03013b49ecb5253e1a5a8996
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-slot@npm:1.0.0":
   version: 1.0.0
   resolution: "@radix-ui/react-slot@npm:1.0.0"
@@ -4296,6 +4326,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-slot@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-slot@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-compose-refs": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: a20693f8ce532bd6cbff12ba543dfcf90d451f22923bd60b57dc9e639f6e53348915e182002b33444feb6ab753434e78e2a54085bf7092aadda4418f0423763f
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-callback-ref@npm:1.0.0":
   version: 1.0.0
   resolution: "@radix-ui/react-use-callback-ref@npm:1.0.0"