feat(avatar): set ShadCN Avatar structure

Author: TylerAPfledderer

src/components/ui/__stories__/Avatar.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Avatar } from "../avatar"
+import { HStack } from "../flex"
+
+const meta = {
+  title: "Atoms / Media & Icons / UI Avatars",
+  component: Avatar,
+} satisfies Meta<typeof Avatar>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Single: Story = {
+  args: {
+    name: "dan abrahmov",
+    src: "https://bit.ly/dan-abramov",
+    href: "#",
+  },
+  render: (args) => <Avatar {...args} />,
+}
+
+export const WithUsername: Story = {
+  args: {
+    name: "Dan Abrahmov",
+    src: "http://bit.ly/dan-abramov",
+    href: "http://bit.ly/dan-abramov",
+    label: "daneabrahmov",
+  },
+  render: (args) => (
+    <HStack className="gap-4">
+      <Avatar {...args} />
+      <Avatar {...args} direction="column" />
+    </HStack>
+  ),
+}

src/components/ui/avatar.tsx

@@ -1,11 +1,18 @@
 import * as React from "react"
+import upperCase from "lodash/upperCase"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
-const Avatar = React.forwardRef<
+import { Center } from "./flex"
+import { BaseLink, type LinkProps } from "./Link"
+import { LinkBox, LinkOverlay } from "./link-box"
+
+type AvatarBaseProps = React.ComponentProps<typeof AvatarPrimitive.Root>
+
+const AvatarBase = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+  AvatarBaseProps
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
@@ -16,15 +23,16 @@ const Avatar = React.forwardRef<
     {...props}
   />
 ))
-Avatar.displayName = AvatarPrimitive.Root.displayName
+AvatarBase.displayName = AvatarPrimitive.Root.displayName
 
 const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
+>(({ className, alt = "", ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
     className={cn("aspect-square h-full w-full", className)}
+    alt={alt}
     {...props}
   />
 ))
@@ -45,4 +53,70 @@ const AvatarFallback = React.forwardRef<
 ))
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
 
-export { Avatar, AvatarFallback, AvatarImage }
+export type AvatarProps = AvatarBaseProps &
+  Required<Pick<LinkProps, "href">> & {
+    label?: string
+    /**
+     * @default "row"
+     */
+    direction?: "column" | "row"
+    name: string
+    src: string
+  }
+
+const Avatar = React.forwardRef<
+  React.ElementRef<"span"> | React.ElementRef<"div">,
+  AvatarProps
+>((props, ref) => {
+  const { href, src, name, label, direction = "row" } = props
+
+  const commonLinkProps = {
+    href,
+  }
+
+  const fallbackInitials = upperCase(
+    name
+      .split(" ")
+      .map((n) => n[0])
+      .join("")
+  )
+
+  if (label) {
+    const _direction: "flex-col-reverse" | "flex-row-reverse" =
+      direction === "row" ? "flex-row-reverse" : "flex-col-reverse"
+
+    const _ref = ref as React.ForwardedRef<HTMLDivElement>
+    return (
+      <LinkBox
+        // !! Inconsistent strategy, using `as` prop instead of `asChild` bool
+        as={Center}
+        ref={_ref}
+        className={cn(_direction, "gap-x-1 gap-y-0")}
+      >
+        <LinkOverlay
+          asChild
+          className="z-overlay inline-flex items-center gap-1 p-1 no-underline"
+          data-peer
+        >
+          <BaseLink {...commonLinkProps}>{label}</BaseLink>
+        </LinkOverlay>
+        <AvatarBase>
+          <AvatarImage src={src} />
+          <AvatarFallback>{fallbackInitials}</AvatarFallback>
+        </AvatarBase>
+      </LinkBox>
+    )
+  }
+
+  return (
+    <AvatarBase ref={ref} asChild>
+      <BaseLink {...commonLinkProps}>
+        <AvatarImage src={src} />
+        <AvatarFallback>{fallbackInitials}</AvatarFallback>
+      </BaseLink>
+    </AvatarBase>
+  )
+})
+Avatar.displayName = "Avatar"
+
+export { Avatar, AvatarBase, AvatarFallback, AvatarImage }