From 477ac22cc4475d4b1a58c062f8f8542a739358e9 Mon Sep 17 00:00:00 2001 From: juyeon-park Date: Mon, 30 Oct 2023 15:58:31 +0900 Subject: [PATCH] =?UTF-8?q?:tada:=20Avatar=20=EA=B3=B5=ED=86=B5=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 27 +++++++++ src/components/ui/Avatar/Avatar.stories.tsx | 34 +++++++++++ src/components/ui/Avatar/Avatar.tsx | 67 +++++++++++++++++++++ src/components/ui/Avatar/index.tsx | 3 + 5 files changed, 132 insertions(+) create mode 100644 src/components/ui/Avatar/Avatar.stories.tsx create mode 100644 src/components/ui/Avatar/Avatar.tsx create mode 100644 src/components/ui/Avatar/index.tsx diff --git a/package.json b/package.json index d5ee5cde..01de7f33 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "chromatic": "npx chromatic --project-token=chpt_00fe989402301dc" }, "dependencies": { + "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-icons": "^1.3.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dc8f4090..d6772519 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + '@radix-ui/react-avatar': + specifier: ^1.0.4 + version: 1.0.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) '@radix-ui/react-dialog': specifier: ^1.0.5 version: 1.0.5(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) @@ -2202,6 +2205,30 @@ packages: react: 18.0.0 react-dom: 18.0.0(react@18.0.0) + /@radix-ui/react-avatar@1.0.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0): + resolution: {integrity: sha512-kVK2K7ZD3wwj3qhle0ElXhOjbezIgyl2hVvgwfIdexL3rN6zJmy5AqqIf+D31lxVppdzV8CjAfZ6PklkmInZLw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.23.2 + '@radix-ui/react-context': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@types/react': 18.0.0 + '@types/react-dom': 18.0.0 + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + dev: false + /@radix-ui/react-collection@1.0.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0): resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==} peerDependencies: diff --git a/src/components/ui/Avatar/Avatar.stories.tsx b/src/components/ui/Avatar/Avatar.stories.tsx new file mode 100644 index 00000000..10fc1ab3 --- /dev/null +++ b/src/components/ui/Avatar/Avatar.stories.tsx @@ -0,0 +1,34 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { Avatar, AvatarImage, AvatarFallback } from './Avatar' + +const meta = { + title: 'UI/Avatar', + component: Avatar, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Normal: Story = { + args: {}, + render: () => { + return ( + <> + + + NB + + + + NB + + + + NB + + + ) + }, +} diff --git a/src/components/ui/Avatar/Avatar.tsx b/src/components/ui/Avatar/Avatar.tsx new file mode 100644 index 00000000..bf9ed9e7 --- /dev/null +++ b/src/components/ui/Avatar/Avatar.tsx @@ -0,0 +1,67 @@ +'use client' + +import * as React from 'react' +import * as AvatarPrimitive from '@radix-ui/react-avatar' +import { cva, type VariantProps } from 'class-variance-authority' +import { cn } from '@/utils' + +const avatarVariants = cva( + 'relative flex shrink-0 overflow-hidden rounded-full', + { + variants: { + size: { + sm: 'w-6 h-6', + md: 'w-10 h-10', + lg: 'w-[100px] h-[100px]', + }, + }, + }, +) + +export interface AvatarProps + extends React.HTMLAttributes, + VariantProps { + ref?: React.Ref +} + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & + VariantProps +>(({ className, size, ...props }: AvatarProps, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/src/components/ui/Avatar/index.tsx b/src/components/ui/Avatar/index.tsx new file mode 100644 index 00000000..6fe2f610 --- /dev/null +++ b/src/components/ui/Avatar/index.tsx @@ -0,0 +1,3 @@ +import { Avatar, AvatarImage, AvatarFallback } from './Avatar' + +export { Avatar, AvatarImage, AvatarFallback }