From 232a7f18d1a6d2fd54e65b2f9bd10461c1e22b19 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Tue, 11 Jun 2024 20:05:04 +0900 Subject: [PATCH 01/27] =?UTF-8?q?feat:=20=EB=B2=84=ED=8A=BC=20=EA=B8=B0?= =?UTF-8?q?=EB=B3=B8=20=ED=8B=80=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wow-ui/src/components/Button/index.tsx | 198 ++++++++++++++++-- 1 file changed, 180 insertions(+), 18 deletions(-) diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx index afb23018..d50294bf 100644 --- a/packages/wow-ui/src/components/Button/index.tsx +++ b/packages/wow-ui/src/components/Button/index.tsx @@ -1,25 +1,187 @@ -import { css } from "@styled-system/css/css"; -import type { ReactNode } from "react"; +"use client"; + +import { cva } from "@styled-system/css/cva"; +import { styled } from "@styled-system/jsx"; +import type { CSSProperties, KeyboardEvent } from "react"; +import { forwardRef, useCallback, useState } from "react"; + +/** + * @description 버튼 컴포넌트의 속성을 정의합니다. + * + * @param {boolean} [disabled] - 버튼이 비활성화되어 있는지 여부. + * @param {string} label - 버튼의 라벨. + * @param {CSSProperties} [customStyle] - 버튼의 커스텀 스타일. + * @param {string} [className] - 버튼에 전달하는 커스텀 클래스. + * @param {ComponentPropsWithoutRef} rest 렌더링된 요소 또는 컴포넌트에 전달할 추가 props. + * @param {ComponentPropsWithRef["ref"]} ref 렌더링된 요소 또는 컴포넌트에 연결할 ref. + */ export interface ButtonProps { - children: ReactNode; + disabled?: boolean; + label: string; + size?: "large" | "small"; + style?: "solid" | "outline" | "text"; + state?: "default" | "success" | "error"; + customStyle?: CSSProperties; + className?: string; } -const Button = ({ children }: ButtonProps) => { - return ( - - ); -}; + }, + small: { + height: "2.375rem", + padding: "1rem", + borderRadius: "full", + }, + }, + style: { + solid: { + background: "primary", + color: "textWhite", + + _disabled: { + background: "darkDisabled", + cursor: "default", + }, + _hover: {}, + "&[data-pressed=true]": { + background: "bluePressed", + }, + }, + outline: { + borderWidth: 1, + borderStyle: "solid", + borderColor: "primary", + + background: "background", + color: "primary", + + _disabled: { + borderColor: "darkDisabled", + color: "darkDisabled", + cursor: "default", + }, + _hover: { + borderColor: "bluePressed", + color: "bluePressed", + }, + "&[data-pressed=true]": { + borderColor: "bluePressed", + background: "blueBackgroundPressed", + color: "bluePressed", + }, + }, + text: { + background: "none", + color: "sub", + _disabled: { + borderColor: "darkDisabled", + color: "darkDisabled", + cursor: "default", + }, + _hover: { + color: "textBlack", + }, + "&[data-pressed=true]": { + background: "monoBackgroundPressed", + }, + }, + }, + state: { + default: {}, + success: { + borderColor: "success", + color: "success", + }, + error: { + borderColor: "error", + color: "error", + }, + }, + }, +}); +Button.displayName = "Button"; export default Button; From 7f74297d5397bc4ae9afc1614e4b580796a76859 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Fri, 14 Jun 2024 19:56:11 +0900 Subject: [PATCH 02/27] =?UTF-8?q?fix:=20style=20=EB=B3=80=EC=88=98?= =?UTF-8?q?=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Button/Button.stories.ts | 40 ++++++++++++++++++- .../wow-ui/src/components/Button/index.tsx | 16 ++++---- 2 files changed, 45 insertions(+), 11 deletions(-) diff --git a/packages/wow-ui/src/components/Button/Button.stories.ts b/packages/wow-ui/src/components/Button/Button.stories.ts index d5b7d788..d4eb885c 100644 --- a/packages/wow-ui/src/components/Button/Button.stories.ts +++ b/packages/wow-ui/src/components/Button/Button.stories.ts @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import Button from "@/components/Button"; const meta = { - title: "Example/Button", + title: "UI/Button", component: Button, tags: ["autodocs"], } satisfies Meta; @@ -14,6 +14,42 @@ type Story = StoryObj; export const Default: Story = { args: { - children: "버튼", + label: "Button", + size: "large", + variant: "solid", + }, +}; + +export const Disabled: Story = { + args: { + disabled: true, + label: "Button", + size: "large", + variant: "solid", + }, +}; + +export const Outline: Story = { + args: { + disabled: true, + label: "Button", + size: "large", + variant: "outline", + }, +}; + +export const Small: Story = { + args: { + label: "Button", + size: "small", + variant: "solid", + }, +}; + +export const Text: Story = { + args: { + label: "Button", + size: "small", + variant: "text", }, }; diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx index d50294bf..82d61593 100644 --- a/packages/wow-ui/src/components/Button/index.tsx +++ b/packages/wow-ui/src/components/Button/index.tsx @@ -10,7 +10,7 @@ import { forwardRef, useCallback, useState } from "react"; * * @param {boolean} [disabled] - 버튼이 비활성화되어 있는지 여부. * @param {string} label - 버튼의 라벨. - * @param {CSSProperties} [customStyle] - 버튼의 커스텀 스타일. + * @param {CSSProperties} [style] - 버튼의 커스텀 스타일. * @param {string} [className] - 버튼에 전달하는 커스텀 클래스. * @param {ComponentPropsWithoutRef} rest 렌더링된 요소 또는 컴포넌트에 전달할 추가 props. * @param {ComponentPropsWithRef["ref"]} ref 렌더링된 요소 또는 컴포넌트에 연결할 ref. @@ -20,9 +20,9 @@ export interface ButtonProps { disabled?: boolean; label: string; size?: "large" | "small"; - style?: "solid" | "outline" | "text"; + variant?: "solid" | "outline" | "text"; state?: "default" | "success" | "error"; - customStyle?: CSSProperties; + style?: CSSProperties; className?: string; } @@ -32,9 +32,8 @@ const Button = forwardRef( disabled = false, label, size = "large", - style = "solid", + variant = "solid", state = "default", - customStyle, ...rest }, ref @@ -73,10 +72,9 @@ const Button = forwardRef( data-pressed={pressed} disabled={disabled} ref={ref} - style={customStyle} className={ButtonStyle({ size, - style, + variant, state, })} onKeyDown={handleKeyDown} @@ -86,7 +84,7 @@ const Button = forwardRef( onMouseUp={handleMouseUp} {...rest} > - + {label} @@ -116,7 +114,7 @@ const ButtonStyle = cva({ borderRadius: "full", }, }, - style: { + variant: { solid: { background: "primary", color: "textWhite", From 39ec75a04e46161d5de07151c22c3cf228534f69 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Wed, 19 Jun 2024 17:26:57 +0900 Subject: [PATCH 03/27] =?UTF-8?q?feat:=20=EB=8B=A4=ED=98=95=EC=84=B1=20?= =?UTF-8?q?=EA=B3=A0=EB=A0=A4=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Button/Button.test.tsx | 10 ----- .../wow-ui/src/components/Button/index.tsx | 39 +++++++++++++++---- packages/wow-ui/src/types/Polymorphic.ts | 9 +++-- 3 files changed, 37 insertions(+), 21 deletions(-) delete mode 100644 packages/wow-ui/src/components/Button/Button.test.tsx diff --git a/packages/wow-ui/src/components/Button/Button.test.tsx b/packages/wow-ui/src/components/Button/Button.test.tsx deleted file mode 100644 index a6e73d9c..00000000 --- a/packages/wow-ui/src/components/Button/Button.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from "@testing-library/react"; - -import Button from "."; - -test("Button renders correctly", () => { - const { getByText } = render(); - - const buttonElement = getByText("Click me"); - expect(buttonElement).toBeTruthy(); -}); diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx index 82d61593..489412e0 100644 --- a/packages/wow-ui/src/components/Button/index.tsx +++ b/packages/wow-ui/src/components/Button/index.tsx @@ -2,9 +2,20 @@ import { cva } from "@styled-system/css/cva"; import { styled } from "@styled-system/jsx"; -import type { CSSProperties, KeyboardEvent } from "react"; +import type { + CSSProperties, + ElementType, + KeyboardEvent, + ReactNode, +} from "react"; import { forwardRef, useCallback, useState } from "react"; +import type { + PolymorphicComponentProps, + PolymorphicComponentPropsWithRef, + PolymorphicRef, +} from "@/types"; + /** * @description 버튼 컴포넌트의 속성을 정의합니다. * @@ -16,7 +27,7 @@ import { forwardRef, useCallback, useState } from "react"; * @param {ComponentPropsWithRef["ref"]} ref 렌더링된 요소 또는 컴포넌트에 연결할 ref. */ -export interface ButtonProps { +export interface CustomButtonProps { disabled?: boolean; label: string; size?: "large" | "small"; @@ -26,18 +37,30 @@ export interface ButtonProps { className?: string; } -const Button = forwardRef( - ( +type ButtonProps = PolymorphicComponentProps< + C, + CustomButtonProps +>; + +type ButtonComponent = ( + props: PolymorphicComponentPropsWithRef> +) => ReactNode; + +const Button: ButtonComponent & { displayName?: string } = forwardRef( + ( { + as, disabled = false, label, size = "large", variant = "solid", state = "default", ...rest - }, - ref + }: ButtonProps, + ref?: PolymorphicRef ) => { + const Component = as || "button"; + const [pressed, setPressed] = useState(false); const handleMouseDown = useCallback(() => { @@ -67,7 +90,7 @@ const Button = forwardRef( ); return ( - ( {label} - + ); } ); diff --git a/packages/wow-ui/src/types/Polymorphic.ts b/packages/wow-ui/src/types/Polymorphic.ts index ae92de33..7193309d 100644 --- a/packages/wow-ui/src/types/Polymorphic.ts +++ b/packages/wow-ui/src/types/Polymorphic.ts @@ -11,11 +11,14 @@ export interface AsProps { export type PolymorphicRef = ComponentPropsWithRef["ref"]; +export type PolymorphicComponentPropsWithRef< + C extends ElementType, + Props = {}, +> = Props & { ref?: PolymorphicRef }; + export type PolymorphicComponentProps< T extends ElementType, Props = {}, > = AsProps & ComponentPropsWithoutRef & - Props & { - ref?: PolymorphicRef; - }; + PolymorphicComponentPropsWithRef; From b43e99e1bb7f909b61ca7edb8f58bc1469bc9905 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Wed, 19 Jun 2024 17:30:30 +0900 Subject: [PATCH 04/27] =?UTF-8?q?feat:=20Enter=20=ED=82=A4=EB=B3=B4?= =?UTF-8?q?=EB=93=9C=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Button/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx index 489412e0..525c56e8 100644 --- a/packages/wow-ui/src/components/Button/index.tsx +++ b/packages/wow-ui/src/components/Button/index.tsx @@ -73,7 +73,7 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef( const handleKeyDown = useCallback( (event: KeyboardEvent) => { - if (event.key === " ") { + if (event.key === " " || event.key === "Enter") { setPressed(true); } }, @@ -82,7 +82,7 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef( const handleKeyUp = useCallback( (event: KeyboardEvent) => { - if (event.key === " ") { + if (event.key === " " || event.key === "Enter") { setPressed(false); } }, From db7788be37cf5034e913153d29080590605d6a21 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Thu, 20 Jun 2024 00:50:41 +0900 Subject: [PATCH 05/27] =?UTF-8?q?feat:=20useButton=20hook=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wow-ui/src/components/Button/index.tsx | 102 ++++++------------ packages/wow-ui/src/hooks/useButton.ts | 50 +++++++++ 2 files changed, 83 insertions(+), 69 deletions(-) create mode 100644 packages/wow-ui/src/hooks/useButton.ts diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx index 525c56e8..aa1fd151 100644 --- a/packages/wow-ui/src/components/Button/index.tsx +++ b/packages/wow-ui/src/components/Button/index.tsx @@ -2,14 +2,10 @@ import { cva } from "@styled-system/css/cva"; import { styled } from "@styled-system/jsx"; -import type { - CSSProperties, - ElementType, - KeyboardEvent, - ReactNode, -} from "react"; -import { forwardRef, useCallback, useState } from "react"; +import type { CSSProperties, ElementType, ReactNode } from "react"; +import { forwardRef } from "react"; +import useButton from "@/hooks/useButton"; import type { PolymorphicComponentProps, PolymorphicComponentPropsWithRef, @@ -30,9 +26,9 @@ import type { export interface CustomButtonProps { disabled?: boolean; label: string; - size?: "large" | "small"; - variant?: "solid" | "outline" | "text"; - state?: "default" | "success" | "error"; + size?: "lg" | "sm"; + variant?: "solid" | "outline"; + onKeyDown?: () => void; style?: CSSProperties; className?: string; } @@ -52,42 +48,22 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef( as, disabled = false, label, - size = "large", + size = "lg", variant = "solid", - state = "default", + onKeyDown, ...rest }: ButtonProps, ref?: PolymorphicRef ) => { const Component = as || "button"; - const [pressed, setPressed] = useState(false); - - const handleMouseDown = useCallback(() => { - if (!disabled) setPressed(true); - }, [setPressed, disabled]); - - const handleMouseUp = useCallback(() => { - if (!disabled) setPressed(false); - }, [setPressed, disabled]); - - const handleKeyDown = useCallback( - (event: KeyboardEvent) => { - if (event.key === " " || event.key === "Enter") { - setPressed(true); - } - }, - [setPressed] - ); - - const handleKeyUp = useCallback( - (event: KeyboardEvent) => { - if (event.key === " " || event.key === "Enter") { - setPressed(false); - } - }, - [setPressed] - ); + const { + pressed, + handleKeyDown, + handleKeyUp, + handleMouseDown, + handleMouseUp, + } = useButton({ disabled, onKeyDown }); return ( - + {label} @@ -125,13 +100,13 @@ const ButtonStyle = cva({ }, variants: { size: { - large: { + lg: { width: "100%", height: "3rem", padding: "1rem", borderRadius: "md", }, - small: { + sm: { height: "2.375rem", padding: "1rem", borderRadius: "full", @@ -174,32 +149,21 @@ const ButtonStyle = cva({ color: "bluePressed", }, }, - text: { - background: "none", - color: "sub", - _disabled: { - borderColor: "darkDisabled", - color: "darkDisabled", - cursor: "default", - }, - _hover: { - color: "textBlack", - }, - "&[data-pressed=true]": { - background: "monoBackgroundPressed", - }, - }, - }, - state: { - default: {}, - success: { - borderColor: "success", - color: "success", - }, - error: { - borderColor: "error", - color: "error", - }, + // text: { + // background: "none", + // color: "sub", + // _disabled: { + // borderColor: "darkDisabled", + // color: "darkDisabled", + // cursor: "default", + // }, + // _hover: { + // color: "textBlack", + // }, + // "&[data-pressed=true]": { + // background: "monoBackgroundPressed", + // }, + // }, }, }, }); diff --git a/packages/wow-ui/src/hooks/useButton.ts b/packages/wow-ui/src/hooks/useButton.ts new file mode 100644 index 00000000..123d57f3 --- /dev/null +++ b/packages/wow-ui/src/hooks/useButton.ts @@ -0,0 +1,50 @@ +"use client"; + +import type { KeyboardEvent } from "react"; +import { useCallback, useState } from "react"; + +interface UseButtonProps { + disabled?: boolean; + onKeyDown?: () => void; +} + +const useButton = ({ disabled = false, onKeyDown }: UseButtonProps) => { + const [pressed, setPressed] = useState(false); + + const handleMouseDown = useCallback(() => { + if (!disabled) setPressed(true); + }, [setPressed, disabled]); + + const handleMouseUp = useCallback(() => { + if (!disabled) setPressed(false); + }, [setPressed, disabled]); + + const handleKeyDown = useCallback( + (event: KeyboardEvent) => { + if (event.key === " " || event.key === "Enter") { + setPressed(true); + onKeyDown?.(); + } + }, + [setPressed, onKeyDown] + ); + + const handleKeyUp = useCallback( + (event: KeyboardEvent) => { + if (event.key === " " || event.key === "Enter") { + setPressed(false); + } + }, + [setPressed] + ); + + return { + pressed, + handleKeyDown, + handleKeyUp, + handleMouseDown, + handleMouseUp, + }; +}; + +export default useButton; From a4125aa1aa14258f51558671750b9e9634bbd600 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Thu, 20 Jun 2024 00:58:26 +0900 Subject: [PATCH 06/27] =?UTF-8?q?chore:=20=EC=86=8D=EC=84=B1=20=EC=A0=95?= =?UTF-8?q?=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wow-ui/src/components/Button/index.tsx | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx index aa1fd151..52806881 100644 --- a/packages/wow-ui/src/components/Button/index.tsx +++ b/packages/wow-ui/src/components/Button/index.tsx @@ -17,6 +17,9 @@ import type { * * @param {boolean} [disabled] - 버튼이 비활성화되어 있는지 여부. * @param {string} label - 버튼의 라벨. + * @param {"lg" | "sm"} [size] - 버튼의 크기. + * @param {"solid" | "outline"} [variant] - 버튼의 종류. + * @param {() => void} [onKeyDown] - 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 눌렀을 때 동작할 이벤트. * @param {CSSProperties} [style] - 버튼의 커스텀 스타일. * @param {string} [className] - 버튼에 전달하는 커스텀 클래스. * @param {ComponentPropsWithoutRef} rest 렌더링된 요소 또는 컴포넌트에 전달할 추가 props. @@ -149,21 +152,6 @@ const ButtonStyle = cva({ color: "bluePressed", }, }, - // text: { - // background: "none", - // color: "sub", - // _disabled: { - // borderColor: "darkDisabled", - // color: "darkDisabled", - // cursor: "default", - // }, - // _hover: { - // color: "textBlack", - // }, - // "&[data-pressed=true]": { - // background: "monoBackgroundPressed", - // }, - // }, }, }, }); From a20923db3efe83baf60c5544e52106b05410d3a5 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Thu, 20 Jun 2024 01:18:33 +0900 Subject: [PATCH 07/27] =?UTF-8?q?design:=20disabled=EB=90=98=EC=A7=80=20?= =?UTF-8?q?=EC=95=8A=EC=95=98=EC=9D=84=20=EB=95=8C=EB=A7=8C=20hover=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Button/index.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx index 52806881..c4a79f85 100644 --- a/packages/wow-ui/src/components/Button/index.tsx +++ b/packages/wow-ui/src/components/Button/index.tsx @@ -122,9 +122,11 @@ const ButtonStyle = cva({ _disabled: { background: "darkDisabled", - cursor: "default", + cursor: "not-allowed", + }, + _hover: { + "&:not(_disabled)": {}, }, - _hover: {}, "&[data-pressed=true]": { background: "bluePressed", }, @@ -140,11 +142,13 @@ const ButtonStyle = cva({ _disabled: { borderColor: "darkDisabled", color: "darkDisabled", - cursor: "default", + cursor: "not-allowed", }, _hover: { - borderColor: "bluePressed", - color: "bluePressed", + "&:not(_disabled)": { + borderColor: "blueHover", + color: "blueHover", + }, }, "&[data-pressed=true]": { borderColor: "bluePressed", From be6247c9353d11ab5288f0efdba0f24b460ab30b Mon Sep 17 00:00:00 2001 From: hamo-o Date: Thu, 20 Jun 2024 02:55:50 +0900 Subject: [PATCH 08/27] =?UTF-8?q?feat:=20shadows=20token=20=EB=93=B1?= =?UTF-8?q?=EB=A1=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/theme/src/tokens/index.ts | 2 ++ packages/theme/src/tokens/shadows.ts | 7 +++++++ packages/wow-tokens/src/index.ts | 1 + packages/wow-tokens/src/shadow.ts | 17 +++++++++++++++++ 4 files changed, 27 insertions(+) create mode 100644 packages/theme/src/tokens/shadows.ts create mode 100644 packages/wow-tokens/src/shadow.ts diff --git a/packages/theme/src/tokens/index.ts b/packages/theme/src/tokens/index.ts index 38a2977f..ad922f66 100644 --- a/packages/theme/src/tokens/index.ts +++ b/packages/theme/src/tokens/index.ts @@ -6,6 +6,7 @@ import { defineTokens } from "@pandacss/dev"; import { colors, gradients } from "./color.ts"; import { radii } from "./radius.ts"; +import { shadows } from "./shadows.ts"; import { spacing } from "./space.ts"; import { borderWidths } from "./stroke.ts"; import { zIndex } from "./zIndex.ts"; @@ -17,4 +18,5 @@ export const tokens = defineTokens({ radii, borderWidths, zIndex, + shadows, }); diff --git a/packages/theme/src/tokens/shadows.ts b/packages/theme/src/tokens/shadows.ts new file mode 100644 index 00000000..a38876e8 --- /dev/null +++ b/packages/theme/src/tokens/shadows.ts @@ -0,0 +1,7 @@ +import { defineTokens } from "@pandacss/dev"; +import { shadow } from "wowds-tokens"; + +export const shadows = defineTokens.shadows({ + blue: { value: shadow.blue }, + mono: { value: shadow.mono }, +}); diff --git a/packages/wow-tokens/src/index.ts b/packages/wow-tokens/src/index.ts index 24e2b0d6..8c01423b 100644 --- a/packages/wow-tokens/src/index.ts +++ b/packages/wow-tokens/src/index.ts @@ -1,6 +1,7 @@ export * as breakpoint from "./breakpoint.ts"; export * as color from "./color.ts"; export * as radius from "./radius.ts"; +export * as shadow from "./shadow.ts"; export * as space from "./space.ts"; export * as stroke from "./stroke.ts"; export * as typography from "./typography.ts"; diff --git a/packages/wow-tokens/src/shadow.ts b/packages/wow-tokens/src/shadow.ts new file mode 100644 index 00000000..c2d6a276 --- /dev/null +++ b/packages/wow-tokens/src/shadow.ts @@ -0,0 +1,17 @@ +import { color } from "./index.ts"; + +export const blue = { + offsetX: 0, + offsetY: 4, + blur: 8, + spread: 0, + color: color.blueShadow, +}; + +export const mono = { + offsetX: 0, + offsetY: 4, + blur: 8, + spread: 0, + color: color.shadowMedium, +}; From d3024cbaac9a8d0c8ce865d379effabd3d113020 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Thu, 20 Jun 2024 02:58:47 +0900 Subject: [PATCH 09/27] =?UTF-8?q?feat:=20=EA=B8=B0=EB=B3=B8=20Button=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=95?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wow-ui/src/components/Button/index.tsx | 32 ++++++++++++++----- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx index c4a79f85..495ef001 100644 --- a/packages/wow-ui/src/components/Button/index.tsx +++ b/packages/wow-ui/src/components/Button/index.tsx @@ -71,7 +71,7 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef( return ( Date: Thu, 20 Jun 2024 03:54:39 +0900 Subject: [PATCH 10/27] =?UTF-8?q?feat:=20hover=20pseudo=20class=20?= =?UTF-8?q?=EC=9E=AC=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/panda.config.ts | 3 +++ packages/wow-ui/src/components/Button/index.tsx | 2 ++ 2 files changed, 5 insertions(+) diff --git a/packages/wow-ui/panda.config.ts b/packages/wow-ui/panda.config.ts index 10dc0afe..f4c979b6 100644 --- a/packages/wow-ui/panda.config.ts +++ b/packages/wow-ui/panda.config.ts @@ -44,4 +44,7 @@ export default defineConfig({ semanticTokens, breakpoints, }, + conditions: { + hover: "&[aria-pressed=false]:not(:disabled):hover", + }, }); diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx index 495ef001..102dc363 100644 --- a/packages/wow-ui/src/components/Button/index.tsx +++ b/packages/wow-ui/src/components/Button/index.tsx @@ -163,6 +163,7 @@ const ButtonStyle = cva({ css: { borderColor: "outline", color: "textBlack", + _hover: { borderColor: "textBlack", color: "textBlack", @@ -170,6 +171,7 @@ const ButtonStyle = cva({ _pressed: { borderColor: "outline", background: "monoBackgroundPressed", + color: "textBlack", }, }, }, From c961bfd8260443adcc452d5f9668ff34597de657 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Thu, 20 Jun 2024 20:45:24 +0900 Subject: [PATCH 11/27] =?UTF-8?q?chore:=20Button=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=EB=AA=85=20=EB=B3=80=EA=B2=BD=20&=20sm=20padding=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wow-ui/src/components/Button/{index.tsx => Button.tsx} | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) rename packages/wow-ui/src/components/Button/{index.tsx => Button.tsx} (98%) diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/Button.tsx similarity index 98% rename from packages/wow-ui/src/components/Button/index.tsx rename to packages/wow-ui/src/components/Button/Button.tsx index 102dc363..d68b1db4 100644 --- a/packages/wow-ui/src/components/Button/index.tsx +++ b/packages/wow-ui/src/components/Button/Button.tsx @@ -110,8 +110,7 @@ const ButtonStyle = cva({ borderRadius: "md", }, sm: { - height: "2.375rem", - padding: "1rem", + padding: "0.75rem 1.25rem", borderRadius: "full", }, }, From afd36b03e31be7bb3b29f47d8b819b18df9958de Mon Sep 17 00:00:00 2001 From: hamo-o Date: Thu, 20 Jun 2024 20:51:02 +0900 Subject: [PATCH 12/27] =?UTF-8?q?feat:=20TextButton=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=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 --- .../src/components/Button/TextButton.tsx | 118 ++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 packages/wow-ui/src/components/Button/TextButton.tsx diff --git a/packages/wow-ui/src/components/Button/TextButton.tsx b/packages/wow-ui/src/components/Button/TextButton.tsx new file mode 100644 index 00000000..f9592923 --- /dev/null +++ b/packages/wow-ui/src/components/Button/TextButton.tsx @@ -0,0 +1,118 @@ +"use client"; + +import { css } from "@styled-system/css"; +import { styled } from "@styled-system/jsx"; +import type { CSSProperties, ElementType, ReactNode } from "react"; +import { forwardRef } from "react"; + +import useButton from "@/hooks/useButton"; +import type { + PolymorphicComponentProps, + PolymorphicComponentPropsWithRef, + PolymorphicRef, +} from "@/types"; + +/** + * @description 텍스트 버튼 컴포넌트의 속성을 정의합니다. + * + * @param {boolean} [disabled] - 텍스트 버튼이 비활성화되어 있는지 여부. + * @param {string} label - 텍스트 버튼의 라벨. + * @param {"lg" | "sm"} [size] - 텍스트 버튼의 크기. + * @param {() => void} [onKeyDown] - 텍스트 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 눌렀을 때 동작할 이벤트. + * @param {CSSProperties} [style] - 텍스트 버튼의 커스텀 스타일. + * @param {string} [className] - 텍스트 버튼에 전달하는 커스텀 클래스. + * @param {ComponentPropsWithoutRef} rest 렌더링된 요소 또는 컴포넌트에 전달할 추가 props. + * @param {ComponentPropsWithRef["ref"]} ref 렌더링된 요소 또는 컴포넌트에 연결할 ref. + */ + +export interface CustomButtonProps { + disabled?: boolean; + label: string; + size?: "lg" | "sm"; + onKeyDown?: () => void; + style?: CSSProperties; + className?: string; +} + +type ButtonProps = PolymorphicComponentProps< + C, + CustomButtonProps +>; + +type ButtonComponent = ( + props: PolymorphicComponentPropsWithRef> +) => ReactNode; + +const TextButton: ButtonComponent & { displayName?: string } = forwardRef( + ( + { + as, + disabled = false, + label, + size = "lg", + onKeyDown, + ...rest + }: ButtonProps, + ref?: PolymorphicRef + ) => { + const Component = as || "button"; + + const { + pressed, + handleKeyDown, + handleKeyUp, + handleMouseDown, + handleMouseUp, + } = useButton({ disabled, onKeyDown }); + + return ( + + + {label} + + + ); + } +); + +const TextButtonStyle = css({ + padding: "0.75rem 1.25rem", + + display: "flex", + alignItems: "center", + justifyContent: "center", + + color: "sub", + + borderRadius: "full", + cursor: "pointer", + + _hover: { + color: "textBlack", + }, + _pressed: { + background: "monoBackgroundPressed", + color: "sub", + }, + _disabled: { + color: "lightDisabled", + }, +}); + +TextButton.displayName = "TextButton"; +export default TextButton; From bfb4febfc4642f7c1c72a6f2c7cde89d0b44d67e Mon Sep 17 00:00:00 2001 From: hamo-o Date: Fri, 21 Jun 2024 05:42:36 +0900 Subject: [PATCH 13/27] =?UTF-8?q?fix:=20codegen=20=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=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/codegen/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/codegen/package.json b/packages/codegen/package.json index 96117bd2..e48bb43e 100644 --- a/packages/codegen/package.json +++ b/packages/codegen/package.json @@ -1,6 +1,7 @@ { "name": "codegen", "private": true, + "type": "module", "devDependencies": { "plop": "^4.0.1" } From e974f9e5ada4b7b32b7738235c855e486f129eeb Mon Sep 17 00:00:00 2001 From: hamo-o Date: Fri, 21 Jun 2024 06:09:54 +0900 Subject: [PATCH 14/27] =?UTF-8?q?feat:=20Button=20=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Button/Button.stories.ts | 55 -------- .../src/components/Button/Button.stories.tsx | 131 ++++++++++++++++++ .../Button/{Button.tsx => index.tsx} | 0 3 files changed, 131 insertions(+), 55 deletions(-) delete mode 100644 packages/wow-ui/src/components/Button/Button.stories.ts create mode 100644 packages/wow-ui/src/components/Button/Button.stories.tsx rename packages/wow-ui/src/components/Button/{Button.tsx => index.tsx} (100%) diff --git a/packages/wow-ui/src/components/Button/Button.stories.ts b/packages/wow-ui/src/components/Button/Button.stories.ts deleted file mode 100644 index d4eb885c..00000000 --- a/packages/wow-ui/src/components/Button/Button.stories.ts +++ /dev/null @@ -1,55 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react"; - -import Button from "@/components/Button"; - -const meta = { - title: "UI/Button", - component: Button, - tags: ["autodocs"], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = { - args: { - label: "Button", - size: "large", - variant: "solid", - }, -}; - -export const Disabled: Story = { - args: { - disabled: true, - label: "Button", - size: "large", - variant: "solid", - }, -}; - -export const Outline: Story = { - args: { - disabled: true, - label: "Button", - size: "large", - variant: "outline", - }, -}; - -export const Small: Story = { - args: { - label: "Button", - size: "small", - variant: "solid", - }, -}; - -export const Text: Story = { - args: { - label: "Button", - size: "small", - variant: "text", - }, -}; diff --git a/packages/wow-ui/src/components/Button/Button.stories.tsx b/packages/wow-ui/src/components/Button/Button.stories.tsx new file mode 100644 index 00000000..f3ce8dc7 --- /dev/null +++ b/packages/wow-ui/src/components/Button/Button.stories.tsx @@ -0,0 +1,131 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import Button from "@/components/Button"; + +const meta = { + title: "UI/Button", + component: Button, + tags: ["autodocs"], + parameters: { + componentSubtitle: "버튼 컴포넌트", + }, + argTypes: { + label: { + description: "버튼의 라벨을 나타냅니다.", + table: { + type: { summary: "string" }, + }, + control: { + type: "text", + }, + }, + as: { + description: "버튼을 구성할 HTML 태그의 종류를 나타냅니다.", + table: { + type: { summary: "ElementType" }, + }, + control: false, + }, + disabled: { + description: "버튼이 비활성화되어 있는지 여부를 나타냅니다.", + table: { + type: { summary: "boolean" }, + defaultValue: { summary: "false" }, + }, + control: { + type: "boolean", + }, + }, + size: { + description: "버튼의 크기를 나타냅니다.", + table: { + type: { summary: "lg | sm" }, + defaultValue: { summary: "lg" }, + }, + control: { + type: "radio", + options: ["lg", "sm"], + }, + }, + variant: { + description: "버튼의 종류를 나타냅니다.", + table: { + type: { summary: "solid | outline" }, + defaultValue: { summary: "solid" }, + }, + control: { + type: "radio", + options: ["solid", "outline"], + }, + }, + onKeyDown: { + description: + "버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 눌렀을 때 동작할 이벤트를 나타냅니다.", + table: { + type: { summary: "() => void" }, + }, + control: false, + }, + style: { + description: "버튼의 커스텀 스타일을 나타냅니다.", + table: { + type: { summary: "CSSProperties" }, + }, + control: false, + }, + className: { + description: "버튼에 전달하는 커스텀 클래스를 나타냅니다.", + table: { + type: { summary: "string" }, + }, + control: false, + }, + ref: { + description: "렌더링된 요소 또는 컴포넌트에 연결할 ref를 나타냅니다.", + table: { + type: { summary: 'ComponentPropsWithRef["ref"]' }, + }, + control: false, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + label: "버튼", + }, +}; + +export const LargeSolid: Story = { + args: { + label: "버튼", + variant: "solid", + }, +}; + +export const LargeOutline: Story = { + args: { + label: "버튼", + variant: "outline", + }, +}; + +export const SmallSolid: Story = { + args: { + label: "버튼", + size: "sm", + variant: "solid", + }, +}; + +export const SmallOutline: Story = { + args: { + label: "버튼", + size: "sm", + variant: "outline", + }, +}; diff --git a/packages/wow-ui/src/components/Button/Button.tsx b/packages/wow-ui/src/components/Button/index.tsx similarity index 100% rename from packages/wow-ui/src/components/Button/Button.tsx rename to packages/wow-ui/src/components/Button/index.tsx From ae494ad2b3c11b4698dbecf60ac723de463a2d52 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Fri, 21 Jun 2024 06:14:24 +0900 Subject: [PATCH 15/27] =?UTF-8?q?feat:=20TextButton=20disabled=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=EC=97=90=EC=84=9C=EC=9D=98=20=EC=BB=A4=EC=84=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{Button/TextButton.tsx => TextButton/index.tsx} | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) rename packages/wow-ui/src/components/{Button/TextButton.tsx => TextButton/index.tsx} (99%) diff --git a/packages/wow-ui/src/components/Button/TextButton.tsx b/packages/wow-ui/src/components/TextButton/index.tsx similarity index 99% rename from packages/wow-ui/src/components/Button/TextButton.tsx rename to packages/wow-ui/src/components/TextButton/index.tsx index f9592923..51142198 100644 --- a/packages/wow-ui/src/components/Button/TextButton.tsx +++ b/packages/wow-ui/src/components/TextButton/index.tsx @@ -15,8 +15,8 @@ import type { /** * @description 텍스트 버튼 컴포넌트의 속성을 정의합니다. * - * @param {boolean} [disabled] - 텍스트 버튼이 비활성화되어 있는지 여부. * @param {string} label - 텍스트 버튼의 라벨. + * @param {boolean} [disabled] - 텍스트 버튼이 비활성화되어 있는지 여부. * @param {"lg" | "sm"} [size] - 텍스트 버튼의 크기. * @param {() => void} [onKeyDown] - 텍스트 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 눌렀을 때 동작할 이벤트. * @param {CSSProperties} [style] - 텍스트 버튼의 커스텀 스타일. @@ -26,8 +26,8 @@ import type { */ export interface CustomButtonProps { - disabled?: boolean; label: string; + disabled?: boolean; size?: "lg" | "sm"; onKeyDown?: () => void; style?: CSSProperties; @@ -47,8 +47,8 @@ const TextButton: ButtonComponent & { displayName?: string } = forwardRef( ( { as, - disabled = false, label, + disabled = false, size = "lg", onKeyDown, ...rest @@ -111,6 +111,7 @@ const TextButtonStyle = css({ }, _disabled: { color: "lightDisabled", + cursor: "not-allowed", }, }); From b21609e600f280a15cd4d26ab4143156b1e51ea4 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Fri, 21 Jun 2024 06:15:09 +0900 Subject: [PATCH 16/27] =?UTF-8?q?chore:=20Button=20props=20=EC=88=9C?= =?UTF-8?q?=EC=84=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Button/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx index d68b1db4..f982b6cf 100644 --- a/packages/wow-ui/src/components/Button/index.tsx +++ b/packages/wow-ui/src/components/Button/index.tsx @@ -15,8 +15,8 @@ import type { /** * @description 버튼 컴포넌트의 속성을 정의합니다. * - * @param {boolean} [disabled] - 버튼이 비활성화되어 있는지 여부. * @param {string} label - 버튼의 라벨. + * @param {boolean} [disabled] - 버튼이 비활성화되어 있는지 여부. * @param {"lg" | "sm"} [size] - 버튼의 크기. * @param {"solid" | "outline"} [variant] - 버튼의 종류. * @param {() => void} [onKeyDown] - 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 눌렀을 때 동작할 이벤트. @@ -27,8 +27,8 @@ import type { */ export interface CustomButtonProps { - disabled?: boolean; label: string; + disabled?: boolean; size?: "lg" | "sm"; variant?: "solid" | "outline"; onKeyDown?: () => void; @@ -49,8 +49,8 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef( ( { as, - disabled = false, label, + disabled = false, size = "lg", variant = "solid", onKeyDown, From 0c38a213b243bbfe9538180162e80b45023ed4e6 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Fri, 21 Jun 2024 06:15:41 +0900 Subject: [PATCH 17/27] =?UTF-8?q?feat:=20TextButton=20=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TextButton/TextButton.stories.tsx | 110 ++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 packages/wow-ui/src/components/TextButton/TextButton.stories.tsx diff --git a/packages/wow-ui/src/components/TextButton/TextButton.stories.tsx b/packages/wow-ui/src/components/TextButton/TextButton.stories.tsx new file mode 100644 index 00000000..513c0abd --- /dev/null +++ b/packages/wow-ui/src/components/TextButton/TextButton.stories.tsx @@ -0,0 +1,110 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import TextButton from "@/components/TextButton"; + +const meta = { + title: "UI/TextButton", + component: TextButton, + tags: ["autodocs"], + parameters: { + componentSubtitle: "텍스트 버튼 컴포넌트", + }, + argTypes: { + label: { + description: "텍스트 버튼의 라벨을 나타냅니다.", + table: { + type: { summary: "string" }, + }, + control: { + type: "text", + }, + }, + as: { + description: "텍스트 버튼을 구성할 HTML 태그의 종류를 나타냅니다.", + table: { + type: { summary: "ElementType" }, + }, + control: false, + }, + disabled: { + description: "텍스트 버튼이 비활성화되어 있는지 여부를 나타냅니다.", + table: { + type: { summary: "boolean" }, + defaultValue: { summary: "false" }, + }, + control: { + type: "boolean", + }, + }, + size: { + description: "텍스트 버튼의 크기를 나타냅니다.", + table: { + type: { summary: "lg | sm" }, + defaultValue: { summary: "lg" }, + }, + control: { + type: "radio", + options: ["lg", "sm"], + }, + }, + onKeyDown: { + description: + "텍스트 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 눌렀을 때 동작할 이벤트를 나타냅니다.", + table: { + type: { summary: "() => void" }, + }, + control: false, + }, + style: { + description: "텍스트 버튼의 커스텀 스타일을 나타냅니다.", + table: { + type: { summary: "CSSProperties" }, + }, + control: false, + }, + className: { + description: "텍스트 버튼에 전달하는 커스텀 클래스를 나타냅니다.", + table: { + type: { summary: "string" }, + }, + control: false, + }, + ref: { + description: "렌더링된 요소 또는 컴포넌트에 연결할 ref를 나타냅니다.", + table: { + type: { summary: 'ComponentPropsWithRef["ref"]' }, + }, + control: false, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + label: "Button", + }, +}; + +export const Disabled: Story = { + args: { + label: "Button", + disabled: true, + }, +}; + +export const Large: Story = { + args: { + label: "Button", + }, +}; + +export const Small: Story = { + args: { + label: "Button", + size: "sm", + }, +}; From 65d78b24e124562c51c9c7472d56bfd37337a1d4 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Fri, 21 Jun 2024 06:39:10 +0900 Subject: [PATCH 18/27] =?UTF-8?q?fix:=20color=20contrast=20a11y=20?= =?UTF-8?q?=EB=B9=84=ED=99=9C=EC=84=B1=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Button/Button.stories.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/wow-ui/src/components/Button/Button.stories.tsx b/packages/wow-ui/src/components/Button/Button.stories.tsx index f3ce8dc7..e067410a 100644 --- a/packages/wow-ui/src/components/Button/Button.stories.tsx +++ b/packages/wow-ui/src/components/Button/Button.stories.tsx @@ -8,6 +8,11 @@ const meta = { tags: ["autodocs"], parameters: { componentSubtitle: "버튼 컴포넌트", + a11y: { + config: { + rules: [{ id: "color-contrast", enabled: false }], + }, + }, }, argTypes: { label: { From 3e5b9da31024fb7d7aa648b4b38bfb647130ce3b Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 30 Jun 2024 18:03:59 +0900 Subject: [PATCH 19/27] =?UTF-8?q?chore:=20pressed=20=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=ED=95=A8=EC=88=98=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Button/index.tsx | 10 +++++----- packages/wow-ui/src/components/TextButton/index.tsx | 10 +++++----- packages/wow-ui/src/hooks/useButton.ts | 8 ++++---- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx index f982b6cf..656d96c5 100644 --- a/packages/wow-ui/src/components/Button/index.tsx +++ b/packages/wow-ui/src/components/Button/index.tsx @@ -64,8 +64,8 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef( pressed, handleKeyDown, handleKeyUp, - handleMouseDown, - handleMouseUp, + handleClickDown, + handleClickUp, } = useButton({ disabled, onKeyDown }); return ( @@ -80,9 +80,9 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef( })} onKeyDown={handleKeyDown} onKeyUp={handleKeyUp} - onMouseDown={handleMouseDown} - onMouseLeave={handleMouseUp} - onMouseUp={handleMouseUp} + onMouseDown={handleClickDown} + onMouseLeave={handleClickUp} + onMouseUp={handleClickUp} {...rest} > diff --git a/packages/wow-ui/src/components/TextButton/index.tsx b/packages/wow-ui/src/components/TextButton/index.tsx index 51142198..b66e0bae 100644 --- a/packages/wow-ui/src/components/TextButton/index.tsx +++ b/packages/wow-ui/src/components/TextButton/index.tsx @@ -61,8 +61,8 @@ const TextButton: ButtonComponent & { displayName?: string } = forwardRef( pressed, handleKeyDown, handleKeyUp, - handleMouseDown, - handleMouseUp, + handleClickDown, + handleClickUp, } = useButton({ disabled, onKeyDown }); return ( @@ -74,9 +74,9 @@ const TextButton: ButtonComponent & { displayName?: string } = forwardRef( ref={ref} onKeyDown={handleKeyDown} onKeyUp={handleKeyUp} - onMouseDown={handleMouseDown} - onMouseLeave={handleMouseUp} - onMouseUp={handleMouseUp} + onMouseDown={handleClickDown} + onMouseLeave={handleClickUp} + onMouseUp={handleClickUp} {...rest} > { const [pressed, setPressed] = useState(false); - const handleMouseDown = useCallback(() => { + const handleClickDown = useCallback(() => { if (!disabled) setPressed(true); }, [setPressed, disabled]); - const handleMouseUp = useCallback(() => { + const handleClickUp = useCallback(() => { if (!disabled) setPressed(false); }, [setPressed, disabled]); @@ -42,8 +42,8 @@ const useButton = ({ disabled = false, onKeyDown }: UseButtonProps) => { pressed, handleKeyDown, handleKeyUp, - handleMouseDown, - handleMouseUp, + handleClickDown, + handleClickUp, }; }; From 4318880e07b310e465a16a8ddcdc722e59472a46 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 30 Jun 2024 18:13:31 +0900 Subject: [PATCH 20/27] =?UTF-8?q?fix:=20pressed=20=EC=9D=B4=EB=B2=A4?= =?UTF-8?q?=ED=8A=B8=20=EB=AA=A8=EB=B0=94=EC=9D=BC=EC=97=90=EC=84=9C?= =?UTF-8?q?=EB=8F=84=20=EC=A0=81=EC=9A=A9=EB=90=A0=20=EC=88=98=20=EC=9E=88?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Button/index.tsx | 4 ++-- packages/wow-ui/src/components/TextButton/index.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx index 656d96c5..e9858b5e 100644 --- a/packages/wow-ui/src/components/Button/index.tsx +++ b/packages/wow-ui/src/components/Button/index.tsx @@ -80,9 +80,9 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef( })} onKeyDown={handleKeyDown} onKeyUp={handleKeyUp} - onMouseDown={handleClickDown} onMouseLeave={handleClickUp} - onMouseUp={handleClickUp} + onPointerDown={handleClickDown} + onPointerUp={handleClickUp} {...rest} > diff --git a/packages/wow-ui/src/components/TextButton/index.tsx b/packages/wow-ui/src/components/TextButton/index.tsx index b66e0bae..97f038e4 100644 --- a/packages/wow-ui/src/components/TextButton/index.tsx +++ b/packages/wow-ui/src/components/TextButton/index.tsx @@ -74,9 +74,9 @@ const TextButton: ButtonComponent & { displayName?: string } = forwardRef( ref={ref} onKeyDown={handleKeyDown} onKeyUp={handleKeyUp} - onMouseDown={handleClickDown} onMouseLeave={handleClickUp} - onMouseUp={handleClickUp} + onPointerDown={handleClickDown} + onPointerUp={handleClickUp} {...rest} > Date: Sun, 30 Jun 2024 18:14:03 +0900 Subject: [PATCH 21/27] =?UTF-8?q?fix:=20TextButton=20=EB=AC=B8=EC=84=9C=20?= =?UTF-8?q?=EB=88=84=EB=9D=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/package.json | 5 +++++ packages/wow-ui/rollup.config.js | 1 + 2 files changed, 6 insertions(+) diff --git a/packages/wow-ui/package.json b/packages/wow-ui/package.json index 1e070f17..eaf2095e 100644 --- a/packages/wow-ui/package.json +++ b/packages/wow-ui/package.json @@ -25,6 +25,11 @@ "require": "./dist/TextField.cjs", "import": "./dist/TextField.js" }, + "./TextButton": { + "types": "./dist/components/TextButton/index.d.ts", + "require": "./dist/TextButton.cjs", + "import": "./dist/TextButton.js" + }, "./Switch": { "types": "./dist/components/Switch/index.d.ts", "require": "./dist/Switch.cjs", diff --git a/packages/wow-ui/rollup.config.js b/packages/wow-ui/rollup.config.js index 6763c2cb..2866ca72 100644 --- a/packages/wow-ui/rollup.config.js +++ b/packages/wow-ui/rollup.config.js @@ -21,6 +21,7 @@ process.env.BABEL_ENV = "production"; export default { input: { TextField: "./src/components/TextField", + TextButton: "./src/components/TextButton", Switch: "./src/components/Switch", RadioButton: "./src/components/RadioGroup/RadioButton", RadioGroup: "./src/components/RadioGroup/RadioGroup", From 36c53bbf6ad5a37e47eacc7268406bac4631b6b3 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 30 Jun 2024 18:34:54 +0900 Subject: [PATCH 22/27] =?UTF-8?q?design:=20PC=EC=97=90=EC=84=9C=EB=A7=8C?= =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=EB=84=88=EB=B9=84=20=EC=B5=9C=EC=86=9F?= =?UTF-8?q?=EA=B0=92=20=EC=A7=80=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Button/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx index e9858b5e..a8f6dea6 100644 --- a/packages/wow-ui/src/components/Button/index.tsx +++ b/packages/wow-ui/src/components/Button/index.tsx @@ -105,6 +105,7 @@ const ButtonStyle = cva({ size: { lg: { width: "100%", + maxWidth: { lgOnly: 316 }, height: "3rem", padding: "1rem", borderRadius: "md", From 6e06ed8956a6ec7dafe7a717676b6472cb332d3a Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 30 Jun 2024 18:49:11 +0900 Subject: [PATCH 23/27] =?UTF-8?q?fix:=20Button=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=9D=98=20label=EC=9D=84=20ReactNode?= =?UTF-8?q?=EB=A5=BC=20=EB=B0=9B=EC=9D=84=20=EC=88=98=20=EC=9E=88=EA=B2=8C?= =?UTF-8?q?=20=EC=88=98=EC=A0=95,=20children=EC=9C=BC=EB=A1=9C=20=EB=84=A4?= =?UTF-8?q?=EC=9D=B4=EB=B0=8D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Button/Button.stories.tsx | 10 +++++----- packages/wow-ui/src/components/Button/index.tsx | 14 +++++++++----- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/wow-ui/src/components/Button/Button.stories.tsx b/packages/wow-ui/src/components/Button/Button.stories.tsx index e067410a..7bd89cc5 100644 --- a/packages/wow-ui/src/components/Button/Button.stories.tsx +++ b/packages/wow-ui/src/components/Button/Button.stories.tsx @@ -101,27 +101,27 @@ type Story = StoryObj; export const Primary: Story = { args: { - label: "버튼", + children: "버튼", }, }; export const LargeSolid: Story = { args: { - label: "버튼", + children: "버튼", variant: "solid", }, }; export const LargeOutline: Story = { args: { - label: "버튼", + children: "버튼", variant: "outline", }, }; export const SmallSolid: Story = { args: { - label: "버튼", + children: "버튼", size: "sm", variant: "solid", }, @@ -129,7 +129,7 @@ export const SmallSolid: Story = { export const SmallOutline: Story = { args: { - label: "버튼", + children: "버튼", size: "sm", variant: "outline", }, diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx index a8f6dea6..588a95c5 100644 --- a/packages/wow-ui/src/components/Button/index.tsx +++ b/packages/wow-ui/src/components/Button/index.tsx @@ -15,7 +15,7 @@ import type { /** * @description 버튼 컴포넌트의 속성을 정의합니다. * - * @param {string} label - 버튼의 라벨. + * @param {ReactNode} children - 버튼의 자식 요소. * @param {boolean} [disabled] - 버튼이 비활성화되어 있는지 여부. * @param {"lg" | "sm"} [size] - 버튼의 크기. * @param {"solid" | "outline"} [variant] - 버튼의 종류. @@ -27,7 +27,7 @@ import type { */ export interface CustomButtonProps { - label: string; + children: ReactNode; disabled?: boolean; size?: "lg" | "sm"; variant?: "solid" | "outline"; @@ -49,7 +49,7 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef( ( { as, - label, + children, disabled = false, size = "lg", variant = "solid", @@ -85,8 +85,12 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef( onPointerUp={handleClickUp} {...rest} > - - {label} + + {children} ); From fff6ec22a8cebbc85bbf67f465eebd166738d6e8 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 30 Jun 2024 18:51:05 +0900 Subject: [PATCH 24/27] =?UTF-8?q?chore:=20TextButton=20underline=20css=20?= =?UTF-8?q?=EC=86=8D=EC=84=B1=20=EC=A0=81=EC=9A=A9=20=EB=B0=A9=EB=B2=95=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/TextButton/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/wow-ui/src/components/TextButton/index.tsx b/packages/wow-ui/src/components/TextButton/index.tsx index 97f038e4..608de2d6 100644 --- a/packages/wow-ui/src/components/TextButton/index.tsx +++ b/packages/wow-ui/src/components/TextButton/index.tsx @@ -80,7 +80,7 @@ const TextButton: ButtonComponent & { displayName?: string } = forwardRef( {...rest} > {label} From 75a56e1238f3ba024b111d24e2e4a52a48e2bc3e Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 30 Jun 2024 19:24:24 +0900 Subject: [PATCH 25/27] =?UTF-8?q?feat:=20=EB=82=B4=EB=B6=80=20=EC=A4=91?= =?UTF-8?q?=EB=B3=B5=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=99=B8=EB=B6=80?= =?UTF-8?q?=EC=97=90=EC=84=9C=EB=8F=84=20=EB=B0=9B=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Button/Button.stories.tsx | 34 +++++++++++++++++- .../wow-ui/src/components/Button/index.tsx | 34 ++++++++++++++---- .../TextButton/TextButton.stories.tsx | 34 +++++++++++++++++- .../src/components/TextButton/index.tsx | 33 +++++++++++++---- packages/wow-ui/src/hooks/useButton.ts | 36 ++++++++++++++----- 5 files changed, 147 insertions(+), 24 deletions(-) diff --git a/packages/wow-ui/src/components/Button/Button.stories.tsx b/packages/wow-ui/src/components/Button/Button.stories.tsx index 7bd89cc5..c19c9ef7 100644 --- a/packages/wow-ui/src/components/Button/Button.stories.tsx +++ b/packages/wow-ui/src/components/Button/Button.stories.tsx @@ -65,7 +65,39 @@ const meta = { }, onKeyDown: { description: - "버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 눌렀을 때 동작할 이벤트를 나타냅니다.", + "버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 누르고 있는 동안 동작할 이벤트를 나타냅니다.", + table: { + type: { summary: "() => void" }, + }, + control: false, + }, + onKeyUp: { + description: + "버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 뗐을 때 동작할 이벤트를 나타냅니다.", + table: { + type: { summary: "() => void" }, + }, + control: false, + }, + onMouseLeave: { + description: + "버튼의 영역에서 마우스가 벗어났을 때 동작할 이벤트를 나타냅니다.", + table: { + type: { summary: "() => void" }, + }, + control: false, + }, + onPointerDown: { + description: + "버튼에 포커스 된 상태에서 마우스 또는 터치로 누르고 있는 동안 동작할 이벤트를 나타냅니다.", + table: { + type: { summary: "() => void" }, + }, + control: false, + }, + onPointerUp: { + description: + "버튼에 포커스 된 상태에서 마우스 또는 터치를 뗐을 때 동작할 이벤트를 나타냅니다.", table: { type: { summary: "() => void" }, }, diff --git a/packages/wow-ui/src/components/Button/index.tsx b/packages/wow-ui/src/components/Button/index.tsx index 588a95c5..9210c7db 100644 --- a/packages/wow-ui/src/components/Button/index.tsx +++ b/packages/wow-ui/src/components/Button/index.tsx @@ -19,7 +19,11 @@ import type { * @param {boolean} [disabled] - 버튼이 비활성화되어 있는지 여부. * @param {"lg" | "sm"} [size] - 버튼의 크기. * @param {"solid" | "outline"} [variant] - 버튼의 종류. - * @param {() => void} [onKeyDown] - 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 눌렀을 때 동작할 이벤트. + * @param {() => void} [onKeyUp] - 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 뗐을 때 동작할 이벤트. + * @param {() => void} [onKeyDown] - 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 누르고 있는 동안 동작할 이벤트. + * @param {() => void} [onMouseLeave] - 버튼의 영역에서 마우스가 벗어났을 때 동작할 이벤트. + * @param {() => void} [onPointerDown] - 버튼에 포커스 된 상태에서 마우스 또는 터치로 누르고 있는 동안 동작할 이벤트. + * @param {() => void} [onPointerUp] - 버튼에 포커스 된 상태에서 마우스 또는 터치를 뗐을 때 동작할 이벤트. * @param {CSSProperties} [style] - 버튼의 커스텀 스타일. * @param {string} [className] - 버튼에 전달하는 커스텀 클래스. * @param {ComponentPropsWithoutRef} rest 렌더링된 요소 또는 컴포넌트에 전달할 추가 props. @@ -31,7 +35,11 @@ export interface CustomButtonProps { disabled?: boolean; size?: "lg" | "sm"; variant?: "solid" | "outline"; + onKeyUp?: () => void; onKeyDown?: () => void; + onMouseLeave?: () => void; + onPointerDown?: () => void; + onPointerUp?: () => void; style?: CSSProperties; className?: string; } @@ -53,7 +61,11 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef( disabled = false, size = "lg", variant = "solid", + onKeyUp, onKeyDown, + onMouseLeave, + onPointerDown, + onPointerUp, ...rest }: ButtonProps, ref?: PolymorphicRef @@ -64,9 +76,17 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef( pressed, handleKeyDown, handleKeyUp, - handleClickDown, - handleClickUp, - } = useButton({ disabled, onKeyDown }); + handlePointerDown, + handlePointerUp, + handleMouseLeave, + } = useButton({ + disabled, + onMouseLeave, + onKeyUp, + onKeyDown, + onPointerDown, + onPointerUp, + }); return ( void" }, + }, + control: false, + }, + onKeyUp: { + description: + "텍스트 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 뗐을 때 동작할 이벤트를 나타냅니다.", + table: { + type: { summary: "() => void" }, + }, + control: false, + }, + onMouseLeave: { + description: + "텍스트 버튼의 영역에서 마우스가 벗어났을 때 동작할 이벤트를 나타냅니다.", + table: { + type: { summary: "() => void" }, + }, + control: false, + }, + onPointerDown: { + description: + "텍스트 버튼에 포커스 된 상태에서 마우스 또는 터치로 누르고 있는 동안 동작할 이벤트를 나타냅니다.", + table: { + type: { summary: "() => void" }, + }, + control: false, + }, + onPointerUp: { + description: + "텍스트 버튼에 포커스 된 상태에서 마우스 또는 터치를 뗐을 때 동작할 이벤트를 나타냅니다.", table: { type: { summary: "() => void" }, }, diff --git a/packages/wow-ui/src/components/TextButton/index.tsx b/packages/wow-ui/src/components/TextButton/index.tsx index 608de2d6..4715f230 100644 --- a/packages/wow-ui/src/components/TextButton/index.tsx +++ b/packages/wow-ui/src/components/TextButton/index.tsx @@ -18,7 +18,10 @@ import type { * @param {string} label - 텍스트 버튼의 라벨. * @param {boolean} [disabled] - 텍스트 버튼이 비활성화되어 있는지 여부. * @param {"lg" | "sm"} [size] - 텍스트 버튼의 크기. - * @param {() => void} [onKeyDown] - 텍스트 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 눌렀을 때 동작할 이벤트. + * @param {() => void} [onKeyDown] - 텍스트 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 누르고 있는 동안 동작할 이벤트. + * @param {() => void} [onMouseLeave] - 텍스트 버튼의 영역에서 마우스가 벗어났을 때 동작할 이벤트. + * @param {() => void} [onPointerDown] - 텍스트 버튼에 포커스 된 상태에서 마우스 또는 터치로 누르고 있는 동안 동작할 이벤트. + * @param {() => void} [onPointerUp] - 텍스트 버튼에 포커스 된 상태에서 마우스 또는 터치를 뗐을 때 동작할 이벤트. * @param {CSSProperties} [style] - 텍스트 버튼의 커스텀 스타일. * @param {string} [className] - 텍스트 버튼에 전달하는 커스텀 클래스. * @param {ComponentPropsWithoutRef} rest 렌더링된 요소 또는 컴포넌트에 전달할 추가 props. @@ -29,7 +32,11 @@ export interface CustomButtonProps { label: string; disabled?: boolean; size?: "lg" | "sm"; + onKeyUp?: () => void; onKeyDown?: () => void; + onMouseLeave?: () => void; + onPointerDown?: () => void; + onPointerUp?: () => void; style?: CSSProperties; className?: string; } @@ -50,7 +57,11 @@ const TextButton: ButtonComponent & { displayName?: string } = forwardRef( label, disabled = false, size = "lg", + onKeyUp, onKeyDown, + onMouseLeave, + onPointerDown, + onPointerUp, ...rest }: ButtonProps, ref?: PolymorphicRef @@ -61,9 +72,17 @@ const TextButton: ButtonComponent & { displayName?: string } = forwardRef( pressed, handleKeyDown, handleKeyUp, - handleClickDown, - handleClickUp, - } = useButton({ disabled, onKeyDown }); + handlePointerDown, + handlePointerUp, + handleMouseLeave, + } = useButton({ + disabled, + onKeyUp, + onKeyDown, + onMouseLeave, + onPointerDown, + onPointerUp, + }); return ( void; + onKeyUp?: () => void; onKeyDown?: () => void; + onPointerDown?: () => void; + onPointerUp?: () => void; } -const useButton = ({ disabled = false, onKeyDown }: UseButtonProps) => { +const useButton = ({ + disabled = false, + onMouseLeave, + onKeyUp, + onKeyDown, + onPointerDown, + onPointerUp, +}: UseButtonProps) => { const [pressed, setPressed] = useState(false); - const handleClickDown = useCallback(() => { + const handleMouseLeave = useCallback(() => { + if (!disabled) setPressed(false); + onMouseLeave?.(); + }, [setPressed, disabled, onMouseLeave]); + + const handlePointerDown = useCallback(() => { if (!disabled) setPressed(true); - }, [setPressed, disabled]); + onPointerDown?.(); + }, [setPressed, disabled, onPointerDown]); - const handleClickUp = useCallback(() => { + const handlePointerUp = useCallback(() => { if (!disabled) setPressed(false); - }, [setPressed, disabled]); + onPointerUp?.(); + }, [setPressed, disabled, onPointerUp]); const handleKeyDown = useCallback( (event: KeyboardEvent) => { @@ -33,17 +51,19 @@ const useButton = ({ disabled = false, onKeyDown }: UseButtonProps) => { (event: KeyboardEvent) => { if (event.key === " " || event.key === "Enter") { setPressed(false); + onKeyUp?.(); } }, - [setPressed] + [setPressed, onKeyUp] ); return { pressed, handleKeyDown, handleKeyUp, - handleClickDown, - handleClickUp, + handleMouseLeave, + handlePointerDown, + handlePointerUp, }; }; From ed4b6797dcf7597eedeb868e71cf21a0bf0783b5 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Mon, 1 Jul 2024 22:25:48 +0900 Subject: [PATCH 26/27] =?UTF-8?q?chore:=20TextButton=20label=20=EB=84=A4?= =?UTF-8?q?=EC=9D=B4=EB=B0=8D=20text=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/TextButton/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/wow-ui/src/components/TextButton/index.tsx b/packages/wow-ui/src/components/TextButton/index.tsx index 4715f230..30d1b19a 100644 --- a/packages/wow-ui/src/components/TextButton/index.tsx +++ b/packages/wow-ui/src/components/TextButton/index.tsx @@ -15,7 +15,7 @@ import type { /** * @description 텍스트 버튼 컴포넌트의 속성을 정의합니다. * - * @param {string} label - 텍스트 버튼의 라벨. + * @param {string} text - 텍스트 버튼의 라벨. * @param {boolean} [disabled] - 텍스트 버튼이 비활성화되어 있는지 여부. * @param {"lg" | "sm"} [size] - 텍스트 버튼의 크기. * @param {() => void} [onKeyDown] - 텍스트 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 누르고 있는 동안 동작할 이벤트. @@ -29,7 +29,7 @@ import type { */ export interface CustomButtonProps { - label: string; + text: string; disabled?: boolean; size?: "lg" | "sm"; onKeyUp?: () => void; @@ -54,7 +54,7 @@ const TextButton: ButtonComponent & { displayName?: string } = forwardRef( ( { as, - label, + text, disabled = false, size = "lg", onKeyUp, @@ -102,7 +102,7 @@ const TextButton: ButtonComponent & { displayName?: string } = forwardRef( textDecoration="underline" textStyle={size === "lg" ? "label1" : "label2"} > - {label} + {text} ); From b50bdc06d4f4ae304ee86cff43b49e81bdaabc4f Mon Sep 17 00:00:00 2001 From: hamo-o Date: Tue, 2 Jul 2024 03:34:41 +0900 Subject: [PATCH 27/27] =?UTF-8?q?fix:=20storybook=20args=20=EC=9D=B4?= =?UTF-8?q?=EB=A6=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/TextButton/TextButton.stories.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/wow-ui/src/components/TextButton/TextButton.stories.tsx b/packages/wow-ui/src/components/TextButton/TextButton.stories.tsx index f9ab0411..8afd64e3 100644 --- a/packages/wow-ui/src/components/TextButton/TextButton.stories.tsx +++ b/packages/wow-ui/src/components/TextButton/TextButton.stories.tsx @@ -117,26 +117,26 @@ type Story = StoryObj; export const Primary: Story = { args: { - label: "Button", + text: "Button", }, }; export const Disabled: Story = { args: { - label: "Button", + text: "Button", disabled: true, }, }; export const Large: Story = { args: { - label: "Button", + text: "Button", }, }; export const Small: Story = { args: { - label: "Button", + text: "Button", size: "sm", }, };