From 679b5592060373d272553a468487311cf7880cb0 Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Fri, 22 Mar 2024 08:32:37 +0000 Subject: [PATCH 1/2] feat: avatar primitives --- .eslintrc.json | 4 +- package.json | 1 + pnpm-lock.yaml | 88 ++++++++++++++++++++++++ src/components/Avatar/Avatar.stories.tsx | 58 ++++++++++++++++ src/components/Avatar/Avatar.tsx | 80 +++++++++++++++++++++ src/components/Avatar/index.tsx | 1 + src/components/index.ts | 1 + 7 files changed, 232 insertions(+), 1 deletion(-) create mode 100644 src/components/Avatar/Avatar.stories.tsx create mode 100644 src/components/Avatar/Avatar.tsx create mode 100644 src/components/Avatar/index.tsx diff --git a/.eslintrc.json b/.eslintrc.json index f43fa1c..b3dfd1a 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -23,5 +23,7 @@ "version": "detect" } }, - "rules": {} + "rules": { + "react/prop-types": "off" + } } diff --git a/package.json b/package.json index b2433b8..064aba0 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 18963bc..fdfa75d 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@18.2.28)(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.28)(react@18.2.0) @@ -2139,6 +2142,29 @@ packages: dev: true optional: true + /@radix-ui/react-avatar@1.0.4(@types/react@18.2.28)(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.0 + '@radix-ui/react-context': 1.0.1(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.28)(react@18.2.0) + '@types/react': 18.2.28 + 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.28)(react@18.2.0): resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==} peerDependencies: @@ -2152,6 +2178,40 @@ packages: '@types/react': 18.2.28 react: 18.2.0 + /@radix-ui/react-context@1.0.1(@types/react@18.2.28)(react@18.2.0): + resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.0 + '@types/react': 18.2.28 + react: 18.2.0 + dev: false + + /@radix-ui/react-primitive@1.0.3(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==} + 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.0 + '@radix-ui/react-slot': 1.0.2(@types/react@18.2.28)(react@18.2.0) + '@types/react': 18.2.28 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-slot@1.0.2(@types/react@18.2.28)(react@18.2.0): resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==} peerDependencies: @@ -2166,6 +2226,34 @@ packages: '@types/react': 18.2.28 react: 18.2.0 + /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.28)(react@18.2.0): + resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.0 + '@types/react': 18.2.28 + react: 18.2.0 + dev: false + + /@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.28)(react@18.2.0): + resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.0 + '@types/react': 18.2.28 + react: 18.2.0 + dev: false + /@rollup/pluginutils@5.0.5: resolution: {integrity: sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==} engines: {node: '>=14.0.0'} diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx new file mode 100644 index 0000000..b3d47f1 --- /dev/null +++ b/src/components/Avatar/Avatar.stories.tsx @@ -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) => ( +
+ +
+ ) + ], + 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; + +export default meta; + +type Story = StoryObj; + +export const DefaultVariant: Story = { + name: "Default", + args: { + size: "md", + type: "rounded" + }, + render: (args) => ( + <> + + + RV + + + RV + + + ) +}; diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx new file mode 100644 index 0000000..33344d7 --- /dev/null +++ b/src/components/Avatar/Avatar.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, + React.ComponentPropsWithoutRef & VariantProps +>(({ className, size, type, ...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 & + VariantProps +>(({ className, size, ...props }, ref) => ( + +)); +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; + +export { Avatar, AvatarImage, AvatarFallback }; diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx new file mode 100644 index 0000000..8d3d546 --- /dev/null +++ b/src/components/Avatar/index.tsx @@ -0,0 +1 @@ +export * from "./Avatar"; diff --git a/src/components/index.ts b/src/components/index.ts index 05f0713..af93a24 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -2,3 +2,4 @@ export * from "./Button"; export * from "./Input"; export * from "./Sidebar"; export * from "./Box"; +export * from "./Avatar"; From f082931483457c546584ee0611f3d553a4364a23 Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Fri, 22 Mar 2024 11:13:43 +0000 Subject: [PATCH 2/2] chore: add changeset --- .changeset/new-steaks-deny.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/new-steaks-deny.md diff --git a/.changeset/new-steaks-deny.md b/.changeset/new-steaks-deny.md new file mode 100644 index 0000000..094018f --- /dev/null +++ b/.changeset/new-steaks-deny.md @@ -0,0 +1,5 @@ +--- +"@zenml-io/react-component-library": minor +--- + +add avatar component