From c3dd3ac27c8a97521d47db297fc3c5503e8157fc Mon Sep 17 00:00:00 2001 From: "johancs.mm@gmail.com" Date: Tue, 26 Mar 2024 22:22:58 -0500 Subject: [PATCH 1/2] feat(react): add new component `avatar` --- README.md | 2 +- lib/react/package.json | 1 + lib/react/src/components/avatar.tsx | 48 +++++++++++++++++++++++++++++ lib/react/src/index.ts | 1 + pnpm-lock.yaml | 27 ++++++++++++++++ 5 files changed, 78 insertions(+), 1 deletion(-) create mode 100644 lib/react/src/components/avatar.tsx diff --git a/README.md b/README.md index 746e28c..5f5968e 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,7 @@ _Layout_ _Display_ - [ ] Card -- [ ] Avatar +- [x] Avatar - [ ] Accordion - [x] Alert - [x] Alert Dialog diff --git a/lib/react/package.json b/lib/react/package.json index 95cc36a..71aaa60 100644 --- a/lib/react/package.json +++ b/lib/react/package.json @@ -23,6 +23,7 @@ "@desing-system/theme": "workspace:*", "@radix-ui/react-alert-dialog": "1.0.5", "@radix-ui/react-aspect-ratio": "1.0.3", + "@radix-ui/react-avatar": "1.0.4", "@radix-ui/react-slot": "1.0.2", "class-variance-authority": "0.7.0", "clsx": "2.1.0", diff --git a/lib/react/src/components/avatar.tsx b/lib/react/src/components/avatar.tsx new file mode 100644 index 0000000..f4f74c2 --- /dev/null +++ b/lib/react/src/components/avatar.tsx @@ -0,0 +1,48 @@ +import * as React from 'react' +import * as AvatarPrimitive from '@radix-ui/react-avatar' + +import { cn } from '../lib/cn' + +const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef>(({ className, ...props }, 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/lib/react/src/index.ts b/lib/react/src/index.ts index f670a01..792e3b6 100644 --- a/lib/react/src/index.ts +++ b/lib/react/src/index.ts @@ -9,3 +9,4 @@ export * from './components/carousel' export * from './components/alert-dialog' export * from './components/badge' export * from './components/aspect-ratio' +export * from './components/avatar' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6d5a3bd..973b4a9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -44,6 +44,9 @@ importers: '@radix-ui/react-aspect-ratio': specifier: 1.0.3 version: 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.69)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-avatar': + specifier: 1.0.4 + version: 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.69)(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-slot': specifier: 1.0.2 version: 1.0.2(@types/react@18.2.69)(react@18.2.0) @@ -1250,6 +1253,30 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /@radix-ui/react-avatar@1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.69)(react-dom@18.2.0)(react@18.2.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.24.1 + '@radix-ui/react-context': 1.0.1(@types/react@18.2.69)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.69)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.69)(react@18.2.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.69)(react@18.2.0) + '@types/react': 18.2.69 + '@types/react-dom': 18.2.22 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.69)(react@18.2.0): resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==} peerDependencies: From 0f8acd4840b0d6d991824a532705b9fb2f0762bc Mon Sep 17 00:00:00 2001 From: "johancs.mm@gmail.com" Date: Tue, 26 Mar 2024 22:27:59 -0500 Subject: [PATCH 2/2] test(nextjs): add component `avatar` (#20) --- test/with-nextjs/app/page.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/test/with-nextjs/app/page.tsx b/test/with-nextjs/app/page.tsx index 2f02e8f..6fc265d 100644 --- a/test/with-nextjs/app/page.tsx +++ b/test/with-nextjs/app/page.tsx @@ -1,5 +1,5 @@ import Image from 'next/image' -import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Badge, Button } from '@design-system/react' +import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Badge, Button } from '@design-system/react' export default function Home() { return ( @@ -21,6 +21,12 @@ export default function Home() { Examples UI + + + + JS + + Open