From 283f35f57683207355cdcbd7e2c14b64259aa376 Mon Sep 17 00:00:00 2001 From: baegofda Date: Thu, 28 Nov 2024 15:37:21 +0900 Subject: [PATCH] npm publish (0.0.268) --- package.json | 2 +- src/constants/theme.ts | 2 ++ src/core/components/Avatar/Avatar.stories.tsx | 9 +++----- src/core/components/Avatar/constants/index.ts | 21 ++++++++++++------- src/core/components/Avatar/index.tsx | 5 ++--- src/core/components/Avatar/types/index.ts | 8 ++++--- src/core/components/Chip/constants/index.ts | 2 ++ src/core/components/Chip/index.tsx | 6 ++++++ src/core/components/Label/types/index.ts | 4 +++- 9 files changed, 38 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index d62912b..565bd35 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bbodek-ui", - "version": "0.0.267", + "version": "0.0.268", "type": "module", "author": "Bbodek", "license": "MIT", diff --git a/src/constants/theme.ts b/src/constants/theme.ts index b061db8..6119b1f 100644 --- a/src/constants/theme.ts +++ b/src/constants/theme.ts @@ -15,6 +15,7 @@ export const LIGHT_COLOR_THEME = { export const COLOR_THEME = { ...LIGHT_COLOR_THEME, PRIMARY: 'primary', + PRIMARY_06: 'primary_06', GRAY: 'gray', WHITE: 'white', } as const; @@ -26,6 +27,7 @@ export const COLOR_THEME_VARIANT_OPTIONS = { export const COLOR_THEME_STYLES: Record = { [COLOR_THEME['PRIMARY']]: 'bg-primary-03 text-white', + [COLOR_THEME['PRIMARY_06']]: 'bg-primary-06 text-white', [COLOR_THEME['SECONDARY']]: 'text-primary-03 bg-primary-00', [COLOR_THEME['ERROR']]: 'text-rose-600 bg-[#FFEDEF]', [COLOR_THEME['WARNING']]: 'text-amber-600 bg-[#FEF6DB]', diff --git a/src/core/components/Avatar/Avatar.stories.tsx b/src/core/components/Avatar/Avatar.stories.tsx index d1d1196..7c8a19d 100644 --- a/src/core/components/Avatar/Avatar.stories.tsx +++ b/src/core/components/Avatar/Avatar.stories.tsx @@ -40,7 +40,7 @@ export const ImageAvatar = (props: AvatarProps) => { props.src ?? 'https://avatars.slack-edge.com/2023-11-20/6219341924786_0bca2ecf54cedd4adf1c_512.jpg' } - size={props.size ?? 'medium'} + size={props.size ?? 'xs'} rounded={props.rounded ?? 'rounded-full'} /> ); @@ -50,7 +50,7 @@ export const BrokenImageAvatar = (props: AvatarProps) => { return ( ); @@ -58,10 +58,7 @@ export const BrokenImageAvatar = (props: AvatarProps) => { export const LetterAvatar = (props: AvatarProps) => { return ( - + {props.children ?? 'jinju'} ); diff --git a/src/core/components/Avatar/constants/index.ts b/src/core/components/Avatar/constants/index.ts index f0b0e26..0b4f582 100644 --- a/src/core/components/Avatar/constants/index.ts +++ b/src/core/components/Avatar/constants/index.ts @@ -1,13 +1,20 @@ -import { SIZE } from '@/core/components/Label/constants'; +export const AVATAR_SIZE_VARIANTS = { + X_SMALL: 'xs', + SMALL: 'sm', + MEDIUM: 'md', + LARGE: 'lg', +} as const; export const AVATAR_SIZE = { - [SIZE['SMALL']]: 'h-6 w-6 text-body-03-regular', - [SIZE['MEDIUM']]: 'h-10 w-10 text-body-01-regular', - [SIZE['LARGE']]: 'h-12 w-12 text-subhead-01-regular', + [AVATAR_SIZE_VARIANTS['X_SMALL']]: 'h-5 w-5 text-body-03-regular', + [AVATAR_SIZE_VARIANTS['SMALL']]: 'h-6 w-6 text-body-03-regular', + [AVATAR_SIZE_VARIANTS['MEDIUM']]: 'h-10 w-10 text-body-01-regular', + [AVATAR_SIZE_VARIANTS['LARGE']]: 'h-12 w-12 text-subhead-01-regular', }; export const AVATAR_IMAGE_SIZE = { - [SIZE['SMALL']]: 24, - [SIZE['MEDIUM']]: 40, - [SIZE['LARGE']]: 48, + [AVATAR_SIZE_VARIANTS['X_SMALL']]: 20, + [AVATAR_SIZE_VARIANTS['SMALL']]: 24, + [AVATAR_SIZE_VARIANTS['MEDIUM']]: 40, + [AVATAR_SIZE_VARIANTS['LARGE']]: 48, }; diff --git a/src/core/components/Avatar/index.tsx b/src/core/components/Avatar/index.tsx index 9ffa479..0147e13 100644 --- a/src/core/components/Avatar/index.tsx +++ b/src/core/components/Avatar/index.tsx @@ -8,8 +8,6 @@ import { import clsx from 'clsx'; import Skeleton from 'react-loading-skeleton'; import 'react-loading-skeleton/dist/skeleton.css'; - -import { SIZE } from '@/core/components/Label/constants'; import { BUTTON_ROUNDED, ROUNDED, @@ -18,6 +16,7 @@ import { AvatarProps } from '@/core/components/Avatar/types'; import { AVATAR_IMAGE_SIZE, AVATAR_SIZE, + AVATAR_SIZE_VARIANTS, } from '@/core/components/Avatar/constants'; import { COLOR_THEME_STYLES } from '@/constants/theme'; import { getFirstLetter } from '@/core/components/Avatar/utils/getFirstLetter'; @@ -29,7 +28,7 @@ const Avatar = ({ src, alt, children, - size = SIZE['MEDIUM'], + size = AVATAR_SIZE_VARIANTS['MEDIUM'], rounded = ROUNDED['ROUNDED_FULL'], colorTheme, className, diff --git a/src/core/components/Avatar/types/index.ts b/src/core/components/Avatar/types/index.ts index 95b5564..f7e48cb 100644 --- a/src/core/components/Avatar/types/index.ts +++ b/src/core/components/Avatar/types/index.ts @@ -1,14 +1,16 @@ import { HTMLAttributes, ReactElement } from 'react'; - -import { SizeType } from '@/core/components/Label/types'; import { RoundedType } from '@/core/components/Button/ButtonBase/types'; import { ColorThemeType } from '@/types'; +import { AVATAR_SIZE_VARIANTS } from '@/core/components/Avatar/constants'; + +export type AvatarSizeVariants = + (typeof AVATAR_SIZE_VARIANTS)[keyof typeof AVATAR_SIZE_VARIANTS]; export interface AvatarProps extends Omit, 'content'> { src?: string; alt?: string; - size?: SizeType; + size?: AvatarSizeVariants; rounded?: RoundedType; colorTheme?: ColorThemeType; popover?: ReactElement; diff --git a/src/core/components/Chip/constants/index.ts b/src/core/components/Chip/constants/index.ts index 5d96146..cce8a1a 100644 --- a/src/core/components/Chip/constants/index.ts +++ b/src/core/components/Chip/constants/index.ts @@ -3,6 +3,7 @@ import { COLOR_THEME } from '@/constants/theme'; export const CHIP_DELETE_BUTTON_STYLE: Record = { [COLOR_THEME['PRIMARY']]: 'hover:brightness-90', + [COLOR_THEME['PRIMARY_06']]: 'hover:brightness-90', [COLOR_THEME['SECONDARY']]: 'hover:brightness-90', [COLOR_THEME['ERROR']]: 'hover:brightness-75', [COLOR_THEME['WARNING']]: 'hover:brightness-75', @@ -13,6 +14,7 @@ export const CHIP_DELETE_BUTTON_STYLE: Record = { export const CHIP_LABEL_STYLE: Record = { [COLOR_THEME['PRIMARY']]: 'hover:brightness-110', + [COLOR_THEME['PRIMARY_06']]: 'hover:brightness-110', [COLOR_THEME['SECONDARY']]: 'hover:brightness-95', [COLOR_THEME['ERROR']]: 'hover:brightness-95', [COLOR_THEME['WARNING']]: 'hover:brightness-90', diff --git a/src/core/components/Chip/index.tsx b/src/core/components/Chip/index.tsx index 470349b..c9db048 100644 --- a/src/core/components/Chip/index.tsx +++ b/src/core/components/Chip/index.tsx @@ -19,6 +19,8 @@ const Chip = forwardRef( onDelete, colorTheme = COLOR_THEME['SECONDARY'], onClick, + color, + theme, rounded = ROUNDED['ROUNDED_FULL'], className, ...props @@ -44,6 +46,8 @@ const Chip = forwardRef( - extends Pick, 'className' | 'onClick' | 'title'> { + extends Pick, 'className' | 'onClick' | 'title'>, + Pick { label: ReactNode; element?: T; colorTheme?: ColorThemeType;