From c3353b3914bc6bb390b33eb598ca8bde5ca97dac Mon Sep 17 00:00:00 2001 From: sohee Date: Fri, 14 Jun 2024 17:36:58 +0900 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/Button/Button.tsx | 8 ++-- packages/ui/Button/constants.ts | 69 ++++++++++++++-------------- packages/ui/Control/CheckBox.tsx | 8 ++-- packages/ui/Control/Radio.tsx | 9 ++-- packages/ui/Control/style.css.ts | 6 --- packages/ui/Toast/parts/style.css.ts | 4 +- 6 files changed, 51 insertions(+), 53 deletions(-) diff --git a/packages/ui/Button/Button.tsx b/packages/ui/Button/Button.tsx index bc7d017..2dc12fa 100644 --- a/packages/ui/Button/Button.tsx +++ b/packages/ui/Button/Button.tsx @@ -1,8 +1,9 @@ import React, { type ButtonHTMLAttributes } from 'react'; import * as S from './style.css'; import createButtonVariant from './utils'; +import { iconSizes } from './constants'; -interface IconProps { color?: string } +interface IconProps { color?: string, width: number, height: number } interface ButtonProps extends ButtonHTMLAttributes { children?: React.ReactNode; @@ -25,14 +26,15 @@ function Button({ ...buttonElementProps }: ButtonProps) { const variant = createButtonVariant(theme, rounded, size); + const iconSize = iconSizes[size]; return ( ); } diff --git a/packages/ui/Button/constants.ts b/packages/ui/Button/constants.ts index 69f1af1..1859fe1 100644 --- a/packages/ui/Button/constants.ts +++ b/packages/ui/Button/constants.ts @@ -1,23 +1,19 @@ -import theme from '../theme.css'; -import type { - ButtonColorTheme, - ButtonColorThemeWithStatus, - ButtonSizeTheme, -} from './types'; +import theme from "../theme.css"; +import type { ButtonColorTheme, ButtonColorThemeWithStatus, ButtonSizeTheme } from "./types"; export const bgColors: Record = { - 'white-default': theme.colors.white, - 'black-default': theme.colors.gray700, - 'blue-default': theme.colors.success, - 'red-default': theme.colors.error, - 'white-hover': theme.colors.gray50, - 'black-hover': theme.colors.gray600, - 'blue-hover': theme.colors.blue500, - 'red-hover': theme.colors.red500, - 'white-press': theme.colors.gray100, - 'black-press': theme.colors.gray500, - 'blue-press': theme.colors.blue600, - 'red-press': theme.colors.red600, + "white-default": theme.colors.white, + "black-default": theme.colors.gray700, + "blue-default": theme.colors.success, + "red-default": theme.colors.error, + "white-hover": theme.colors.gray50, + "black-hover": theme.colors.gray600, + "blue-hover": theme.colors.blue500, + "red-hover": theme.colors.red500, + "white-press": theme.colors.gray100, + "black-press": theme.colors.gray500, + "blue-press": theme.colors.blue600, + "red-press": theme.colors.red600, }; export const textColors = { @@ -25,28 +21,33 @@ export const textColors = { dark: theme.colors.gray800, }; -export const colorThemeToTextColor: Record = - { - white: 'dark', - black: 'light', - red: 'light', - blue: 'light', - }; +export const colorThemeToTextColor: Record = { + white: "dark", + black: "light", + red: "light", + blue: "light", +}; export const borderRadiuses: Record = { - sm: '8px', - md: '10px', - lg: '12px', + sm: "8px", + md: "10px", + lg: "12px", }; export const paddings: Record = { - sm: '9px 14px', - md: '12px 20px', - lg: '16px 26px', + sm: "9px 14px", + md: "12px 20px", + lg: "16px 26px", }; export const fontSizes: Record = { - sm: '14px', - md: '14px', - lg: '18px', + sm: "14px", + md: "14px", + lg: "18px", +}; + +export const iconSizes: Record = { + sm: 16, + md: 20, + lg: 24, }; diff --git a/packages/ui/Control/CheckBox.tsx b/packages/ui/Control/CheckBox.tsx index f35e82e..3a2777f 100644 --- a/packages/ui/Control/CheckBox.tsx +++ b/packages/ui/Control/CheckBox.tsx @@ -1,6 +1,7 @@ import type { InputHTMLAttributes } from "react"; import { forwardRef } from "react"; import { IconCheck } from "@sopt-makers/icons"; +import theme from "../theme.css"; import { check, checkBox, @@ -8,7 +9,6 @@ import { checkBoxInput, controlLabel, controlWrapper, - labelColor, } from "./style.css"; export interface CheckBoxProps @@ -16,11 +16,11 @@ export interface CheckBoxProps label?: string; size?: "sm" | "lg"; checked?: boolean; - color?: "white"; + color?: string; } const CheckBox = forwardRef( - ({ checked = false, label, size = "sm", color = "white", ...props }, ref) => { + ({ checked = false, label, size = "sm", color = theme.colors.gray10, ...props }, ref) => { return ( ); diff --git a/packages/ui/Control/Radio.tsx b/packages/ui/Control/Radio.tsx index e1474d1..0d21ad3 100644 --- a/packages/ui/Control/Radio.tsx +++ b/packages/ui/Control/Radio.tsx @@ -1,17 +1,18 @@ import type { InputHTMLAttributes } from "react"; import { forwardRef } from "react"; -import { controlLabel, controlWrapper, labelColor, radio } from "./style.css"; +import theme from "../theme.css"; +import { controlLabel, controlWrapper, radio } from "./style.css"; export interface RadioProps extends Omit, "size"> { label?: string; size?: "sm" | "lg"; checked?: boolean; - color?: "white"; + color?: string; } const Radio = forwardRef( - ({ checked = false, label, size = "sm", color = "white", ...props }, ref) => { + ({ checked = false, label, size = "sm", color = theme.colors.gray10, ...props }, ref) => { return ( ); diff --git a/packages/ui/Control/style.css.ts b/packages/ui/Control/style.css.ts index a0fda28..e488dad 100644 --- a/packages/ui/Control/style.css.ts +++ b/packages/ui/Control/style.css.ts @@ -24,12 +24,6 @@ export const controlLabel = styleVariants({ ], }); -export const labelColor = styleVariants({ - white: { - color: theme.colors.gray10, - }, -}); - // Radio 관련 스타일링 const radioBase = style({ all: "unset", diff --git a/packages/ui/Toast/parts/style.css.ts b/packages/ui/Toast/parts/style.css.ts index ad0ac99..d710ba0 100644 --- a/packages/ui/Toast/parts/style.css.ts +++ b/packages/ui/Toast/parts/style.css.ts @@ -7,7 +7,7 @@ const toastAnimation = keyframes({ }); export const root = style({ - animation: `${toastAnimation} 4s`, + animation: `${toastAnimation} 3s`, animationFillMode: "forwards", display: "flex", @@ -19,7 +19,7 @@ export const root = style({ left: "calc(50% - 16px)", transform: "translateX(-50%)", transition: "transform .2s linear", - + width: "var(--mds-toast-width, 380px)", margin: "0 16px", padding: "14px 16px", From 1ab2ea53683b63901e81afbc169ba8b7a7eff160 Mon Sep 17 00:00:00 2001 From: sohee Date: Fri, 14 Jun 2024 17:37:25 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20storybook=20argTypes=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/docs/src/stories/Button.stories.tsx | 24 +++++++++++++++------- apps/docs/src/stories/Callout.stories.tsx | 3 +++ apps/docs/src/stories/CheckBox.stories.tsx | 5 +++++ apps/docs/src/stories/Chip.stories.tsx | 6 ++++++ apps/docs/src/stories/Radio.stories.tsx | 5 +++++ apps/docs/src/stories/Tag.stories.tsx | 17 ++++++--------- apps/docs/src/stories/Toggle.stories.tsx | 3 +++ 7 files changed, 45 insertions(+), 18 deletions(-) diff --git a/apps/docs/src/stories/Button.stories.tsx b/apps/docs/src/stories/Button.stories.tsx index c6214ac..c17006d 100644 --- a/apps/docs/src/stories/Button.stories.tsx +++ b/apps/docs/src/stories/Button.stories.tsx @@ -1,5 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { Button } from '@sopt-makers/ui'; +import { IconPlus, IconChevronRight } from '@sopt-makers/icons'; interface ButtonOwnProps { size?: 'sm' | 'md' | 'lg'; @@ -16,6 +17,13 @@ export default { title: 'Components/Button', component: Button, tags: ['autodocs'], + argTypes: { + size: { control: 'radio', options: ['sm', 'md', 'lg'] }, + theme: { control: 'radio', options: ['white', 'black', 'blue', 'red'] }, + rounded: { control: 'radio', options: ['md', 'lg'] }, + LeftIcon: { control: false }, + RightIcon: { control: false } + } } as Meta; // 기본 버튼 스토리 @@ -30,22 +38,24 @@ export const Default: StoryObj = { }; // 커스텀 버튼 스토리 -export const Another: StoryObj = { +export const LeftIcon: StoryObj = { args: { - children: 'Another Button', - size: 'lg', + children: 'LeftIcon Button', + size: 'sm', theme: 'red', rounded: 'lg', disabled: false, + LeftIcon: IconPlus, }, }; -export const Disabled: StoryObj = { +export const RightIcon: StoryObj = { args: { - children: 'Disabled Button', - size: 'md', + children: 'RightIcon Button', + size: 'lg', theme: 'blue', rounded: 'lg', - disabled: true, + disabled: false, + RightIcon: IconChevronRight, }, }; \ No newline at end of file diff --git a/apps/docs/src/stories/Callout.stories.tsx b/apps/docs/src/stories/Callout.stories.tsx index 39a6d0d..ebf6546 100644 --- a/apps/docs/src/stories/Callout.stories.tsx +++ b/apps/docs/src/stories/Callout.stories.tsx @@ -14,6 +14,9 @@ export default { title: "Components/Callout", component: Callout, tags: ["autodocs"], + argTypes: { + type: { control: 'radio', options: ['danger', 'information', 'warning'] }, + } } as Meta; // danger 콜아웃 스토리 diff --git a/apps/docs/src/stories/CheckBox.stories.tsx b/apps/docs/src/stories/CheckBox.stories.tsx index a57213e..b15c29d 100644 --- a/apps/docs/src/stories/CheckBox.stories.tsx +++ b/apps/docs/src/stories/CheckBox.stories.tsx @@ -5,6 +5,11 @@ const meta = { title: "Components/Control/CheckBox", component: CheckBox, tags: ["autodocs"], + argTypes: { + size: { control: 'radio', options: ['sm', 'lg'] }, + label: { control: 'text' }, + color: { control: 'color' }, + } } as Meta; export default meta; diff --git a/apps/docs/src/stories/Chip.stories.tsx b/apps/docs/src/stories/Chip.stories.tsx index 1ad69f4..307b95c 100644 --- a/apps/docs/src/stories/Chip.stories.tsx +++ b/apps/docs/src/stories/Chip.stories.tsx @@ -16,6 +16,12 @@ export default { title: 'Components/Chip', component: Chip, tags: ['autodocs'], + argTypes: { + size: { control: 'radio', options: ['sm', 'md'] }, + iconColor: { control: 'color' }, + LeftIcon: { control: false }, + RightIcon: { control: false }, + } } as Meta; // 기본 chip 스토리 diff --git a/apps/docs/src/stories/Radio.stories.tsx b/apps/docs/src/stories/Radio.stories.tsx index af05b50..0f93cdf 100644 --- a/apps/docs/src/stories/Radio.stories.tsx +++ b/apps/docs/src/stories/Radio.stories.tsx @@ -5,6 +5,11 @@ const meta = { title: "Components/Control/Radio", component: Radio, tags: ["autodocs"], + argTypes: { + size: { control: 'radio', options: ['sm', 'lg'] }, + label: { control: 'text' }, + color: { control: 'color' }, + } } as Meta; export default meta; diff --git a/apps/docs/src/stories/Tag.stories.tsx b/apps/docs/src/stories/Tag.stories.tsx index 2bd216c..43b8aab 100644 --- a/apps/docs/src/stories/Tag.stories.tsx +++ b/apps/docs/src/stories/Tag.stories.tsx @@ -17,6 +17,12 @@ export default { title: "Components/Tag", component: Tag, tags: ["autodocs"], + argTypes: { + size: { control: 'radio', options: ['sm', 'md', 'lg'] }, + shape: { control: 'radio', options: ['rect', 'pill'] }, + variant: { control: 'radio', options: ['default', 'primary', 'secondary'] }, + type: { control: 'radio', options: ['solid', 'line'] }, + } } as Meta; // 기본 태그 스토리 @@ -29,14 +35,3 @@ export const Default: StoryObj = { type: "solid", }, }; - -// 커스텀 버튼 스토리 -export const Another: StoryObj = { - args: { - children: "Another Tag", - size: "md", - shape: "pill", - variant: "primary", - type: "line", - }, -}; diff --git a/apps/docs/src/stories/Toggle.stories.tsx b/apps/docs/src/stories/Toggle.stories.tsx index 6f26fb8..3cb8546 100644 --- a/apps/docs/src/stories/Toggle.stories.tsx +++ b/apps/docs/src/stories/Toggle.stories.tsx @@ -5,6 +5,9 @@ const meta = { title: "Components/Control/Toggle", component: Toggle, tags: ["autodocs"], + argTypes: { + size: { control: 'radio', options: ['sm', 'lg'] }, + } } as Meta; export default meta;