feat: add component avatar

Author: Ohh-889

packages/ui-variants/src/index.ts

@@ -5,11 +5,11 @@ export * from './types';
 export * from './variants/accordion';
 export * from './variants/alert';
 export * from './variants/alert-dialog';
+export * from './variants/avatar';
 export * from './variants/badge';
 export * from './variants/button';
 export * from './variants/button-group';
 export * from './variants/card';
 export * from './variants/divider';
 export * from './variants/scroll-area';
-
 export * from './variants/tabs';

packages/ui/package.json

@@ -14,6 +14,7 @@
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-compose-refs": "1.1.2",
     "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-separator": "^1.1.7",

packages/ui/src/components/avatar/index.ts

@@ -0,0 +1,6 @@
+export { default as Avatar } from './source/Avatar';
+export { default as AvatarFallback } from './source/AvatarFallback';
+export { default as AvatarImage } from './source/AvatarImage';
+export { default as AvatarRoot } from './source/AvatarRoot';
+
+export * from './types';

packages/ui/src/components/avatar/source/Avatar.tsx

@@ -0,0 +1,37 @@
+import { Image } from '@radix-ui/react-avatar';
+import type { ElementRef } from 'react';
+import { forwardRef } from 'react';
+
+import type { AvatarProps } from '../types';
+
+import AvatarFallback from './AvatarFallback';
+import AvatarImage from './AvatarImage';
+import AvatarRoot from './AvatarRoot';
+
+const Avatar = forwardRef<ElementRef<typeof Image>, AvatarProps>((props, ref) => {
+  const { className, classNames, delayMs, fallback, size, ...rest } = props;
+
+  return (
+    <AvatarRoot
+      className={classNames?.root}
+      size={size}
+    >
+      <AvatarImage
+        className={className || classNames?.image}
+        ref={ref}
+        {...rest}
+      />
+
+      <AvatarFallback
+        className={classNames?.fallback}
+        delayMs={delayMs}
+      >
+        {fallback}
+      </AvatarFallback>
+    </AvatarRoot>
+  );
+});
+
+Avatar.displayName = Image.displayName;
+
+export default Avatar;

packages/ui/src/components/avatar/source/AvatarFallback.tsx

@@ -0,0 +1,26 @@
+import { Fallback } from '@radix-ui/react-avatar';
+import { avatarVariants, cn } from '@soybean-react-ui/variants';
+import type { ElementRef } from 'react';
+import { forwardRef } from 'react';
+
+import type { AvatarFallbackProps } from '../types';
+
+const AvatarFallback = forwardRef<ElementRef<typeof Fallback>, AvatarFallbackProps>((props, ref) => {
+  const { className, ...rest } = props;
+
+  const { fallback } = avatarVariants();
+
+  const mergedCls = cn(fallback(), className);
+
+  return (
+    <Fallback
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+
+AvatarFallback.displayName = Fallback.displayName;
+
+export default AvatarFallback;

packages/ui/src/components/avatar/source/AvatarImage.tsx

@@ -0,0 +1,26 @@
+import { Image } from '@radix-ui/react-avatar';
+import { avatarVariants, cn } from '@soybean-react-ui/variants';
+import type { ElementRef } from 'react';
+import { forwardRef } from 'react';
+
+import type { AvatarImageProps } from '../types';
+
+const AvatarImage = forwardRef<ElementRef<typeof Image>, AvatarImageProps>((props, ref) => {
+  const { className, ...rest } = props;
+
+  const { image } = avatarVariants();
+
+  const mergedCls = cn(image(), className);
+
+  return (
+    <Image
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+
+AvatarImage.displayName = Image.displayName;
+
+export default AvatarImage;

packages/ui/src/components/avatar/source/AvatarRoot.tsx

@@ -0,0 +1,26 @@
+import { Root } from '@radix-ui/react-avatar';
+import { avatarVariants, cn } from '@soybean-react-ui/variants';
+import type { ElementRef } from 'react';
+import { forwardRef } from 'react';
+
+import type { AvatarRootProps } from '../types';
+
+const AvatarRoot = forwardRef<ElementRef<typeof Root>, AvatarRootProps>((props, ref) => {
+  const { className, size, ...rest } = props;
+
+  const { root } = avatarVariants({ size });
+
+  const mergedCls = cn(root(), className);
+
+  return (
+    <Root
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+
+AvatarRoot.displayName = Root.displayName;
+
+export default AvatarRoot;

packages/ui/src/components/avatar/types.ts

@@ -0,0 +1,21 @@
+import type {
+  AvatarFallbackProps as _AvatarFallbackProps,
+  AvatarImageProps as _AvatarImageProps,
+  AvatarProps as _AvatarRootProps
+} from '@radix-ui/react-avatar';
+import type { AvatarSlots } from '@soybean-react-ui/variants';
+
+import type { BaseNodeProps, ClassValue } from '../../types/other';
+
+export type AvatarUi = Partial<Record<AvatarSlots, ClassValue>>;
+
+export type AvatarRootProps = BaseNodeProps<_AvatarRootProps>;
+
+export type AvatarFallbackProps = BaseNodeProps<_AvatarFallbackProps>;
+
+export type AvatarImageProps = BaseNodeProps<_AvatarImageProps>;
+
+export interface AvatarProps extends AvatarImageProps, Pick<AvatarFallbackProps, 'delayMs'> {
+  classNames?: AvatarUi;
+  fallback?: React.ReactNode;
+}

packages/ui/src/index.ts

@@ -6,6 +6,8 @@ export * from './components/alert-dialog';
 
 export * from './components/aspect-ratio';
 
+export * from './components/avatar';
+
 export * from './components/badge';
 
 export * from './components/button';

playground/src/app/(demo)/avatar/page.tsx

@@ -0,0 +1,67 @@
+import Image from 'next/image';
+import type { ThemeSize } from 'soybean-react-ui';
+import { Avatar, Card } from 'soybean-react-ui';
+
+const soybeanUiRsc = 'https://soybean-ui.com/logo.svg';
+
+const soybeanSrc = 'https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/logo.png';
+
+const sizes: ThemeSize[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+
+const AvatarPage = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <Card
+        split
+        title="Default"
+      >
+        <div className="flex gap-[12px]">
+          <Avatar
+            alt="Soybean UI"
+            fallback="CN"
+            src={soybeanUiRsc}
+          />
+
+          <Avatar
+            alt="Soybean UI"
+            classNames={{ fallback: 'bg-foreground ' }}
+            src={soybeanUiRsc}
+            fallback={
+              <Image
+                alt="Vercel logomark"
+                className="dark:invert"
+                height={20}
+                src="/vercel.svg"
+                width={20}
+              />
+            }
+          />
+        </div>
+      </Card>
+
+      <Card
+        split
+        title="Sizes"
+      >
+        <div className="flex flex-wrap gap-[12px]">
+          {sizes.map(size => (
+            <div
+              className="flex-c-center"
+              key={size}
+            >
+              <Avatar
+                alt="Soybean UI"
+                fallback="SOY"
+                size={size}
+                src={soybeanSrc}
+              />
+              <p>{size}</p>
+            </div>
+          ))}
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default AvatarPage;