feat: Avatar Component (#46)

Author: Cahllagerfeld

.changeset/new-steaks-deny.md

@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": minor
+---
+
+add avatar component

.eslintrc.json

@@ -23,5 +23,7 @@
    "version": "detect"
   }
  },
- "rules": {}
+ "rules": {
+    "react/prop-types": "off"
+  }  
 }

package.json

@@ -84,6 +84,7 @@
 		]
 	},
 	"dependencies": {
+		"@radix-ui/react-avatar": "^1.0.4",
 		"@radix-ui/react-slot": "^1.0.2",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.0",

pnpm-lock.yaml

@@ -0,0 +1,58 @@
+import { Meta } from "@storybook/react";
+import { StoryObj } from "@storybook/react";
+import { Avatar, AvatarFallback, AvatarImage } from "./index";
+import React from "react";
+
+const meta = {
+	title: "UI/Avatar",
+	component: Avatar,
+	parameters: {
+		layout: "centered"
+	},
+	decorators: [
+		(Story) => (
+			<div className="flex items-center gap-7">
+				<Story />
+			</div>
+		)
+	],
+	argTypes: {
+		size: {
+			description: "defining the size of the avatar",
+			control: "select",
+			defaultValue: "md",
+			options: ["xs", "sm", "md", "lg", "xl", "xxl"]
+		},
+		type: {
+			description: "defining the type of the avatar",
+			control: "select",
+			defaultValue: "rounded",
+			options: ["rounded", "square"]
+		}
+	},
+
+	tags: ["autodocs"]
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultVariant: Story = {
+	name: "Default",
+	args: {
+		size: "md",
+		type: "rounded"
+	},
+	render: (args) => (
+		<>
+			<Avatar size={args.size} type={args.type}>
+				<AvatarImage src="https://avatar.vercel.sh/randomValue?size=24" />
+				<AvatarFallback size={args.size}>RV</AvatarFallback>
+			</Avatar>
+			<Avatar size={args.size} type={args.type}>
+				<AvatarFallback size={args.size}>RV</AvatarFallback>
+			</Avatar>
+		</>
+	)
+};

src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cva, VariantProps } from "class-variance-authority";
+import { cn } from "../../utilities";
+
+export const avatarVariants = cva("relative flex shrink-0 overflow-hidden", {
+	variants: {
+		type: { square: "rounded-md", rounded: "rounded-rounded" },
+		size: {
+			xs: "w-3 h-3",
+			sm: "w-5 h-5",
+			md: "w-6 h-6",
+			lg: "w-7 h-7",
+			xl: "w-9 h-9",
+			xxl: "w-12 h-12"
+		}
+	},
+	defaultVariants: {
+		type: "rounded",
+		size: "lg"
+	}
+});
+
+const fallbackVariants = cva(
+	"flex aspect-square items-center justify-center bg-primary-50 text-theme-text-brand font-semibold uppercase",
+	{
+		variants: {
+			size: {
+				xs: "text-text-xs",
+				sm: "text-text-xs",
+				md: "text-text-md",
+				lg: "text-text-lg",
+				xl: "text-display-sm",
+				xxl: "text-display-md"
+			}
+		}
+	}
+);
+
+const Avatar = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & VariantProps<typeof avatarVariants>
+>(({ className, size, type, ...props }, ref) => (
+	<AvatarPrimitive.Root
+		ref={ref}
+		className={cn(avatarVariants({ size, type }), className)}
+		{...props}
+	/>
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Image>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Image
+		ref={ref}
+		className={cn("aspect-square h-full w-full", className)}
+		{...props}
+	/>
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Fallback>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> &
+		VariantProps<typeof fallbackVariants>
+>(({ className, size, ...props }, ref) => (
+	<AvatarPrimitive.Fallback
+		ref={ref}
+		className={cn(fallbackVariants({ size }), className)}
+		{...props}
+	/>
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

src/components/Avatar/Avatar.tsx

@@ -0,0 +1 @@
+export * from "./Avatar";

src/components/Avatar/index.tsx

@@ -2,3 +2,4 @@ export * from "./Button";
 export * from "./Input";
 export * from "./Sidebar";
 export * from "./Box";
+export * from "./Avatar";