From e51ab850fd149338bfbd6fafca70501d03b76f5b Mon Sep 17 00:00:00 2001 From: Brokyeom Date: Tue, 29 Oct 2024 16:50:48 +0900 Subject: [PATCH 1/5] =?UTF-8?q?refactor:=20FieldBox=20=EA=B8=B0=EB=B0=98?= =?UTF-8?q?=EC=9D=98=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20?= =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/Input/TextField.tsx | 48 ++++++++++++++++++++++++--------- 1 file changed, 36 insertions(+), 12 deletions(-) diff --git a/packages/ui/Input/TextField.tsx b/packages/ui/Input/TextField.tsx index e03ad8e3..21108420 100644 --- a/packages/ui/Input/TextField.tsx +++ b/packages/ui/Input/TextField.tsx @@ -1,11 +1,13 @@ -import { type InputHTMLAttributes } from 'react'; +import type { ReactNode, InputHTMLAttributes } from 'react'; +import { FieldBox } from 'index'; import * as S from './style.css'; -import AlertCircleIcon from './icons/AlertCircleIcon'; interface TextFieldProps extends Omit, 'value'> { className?: string; + topAddon?: ReactNode; labelText?: string; descriptionText?: string; + required?: boolean; errorMessage?: string; value: T; // isError -> validationFn 순서로 적용 @@ -14,23 +16,45 @@ interface TextFieldProps extends Omit, } function TextField(props: TextFieldProps) { - const { className, labelText, descriptionText, errorMessage, value, isError, validationFn, ...inputProps } = props; + const { + className, + topAddon, + labelText, + descriptionText, + required, + errorMessage, + value, + isError, + validationFn, + ...inputProps + } = props; const hasError = () => { if (inputProps.disabled || inputProps.readOnly) return false; if (isError !== undefined) return isError; if (validationFn && !validationFn(value)) return true; return false; - } + }; - const required = inputProps.required ? * : null; - const description = descriptionText ?

{descriptionText}

: null; - const input = ; - - return
- {labelText ? :
{description}{input}
} - {hasError() ?

{errorMessage ?? 'error'}

: null} -
+ return ( + : null} + /> + } + className={className} + topAddon={ + labelText || descriptionText ? ( + + ) : ( + topAddon + ) + } + > + + + ); } export default TextField; From 43449f3ab607c07a0f5378fc19ac5a61b833de9d Mon Sep 17 00:00:00 2001 From: Brokyeom Date: Tue, 29 Oct 2024 16:51:04 +0900 Subject: [PATCH 2/5] =?UTF-8?q?docs:=20TextField=20Storybook=20=EB=AC=B8?= =?UTF-8?q?=EC=84=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/docs/src/stories/TextField.stories.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/apps/docs/src/stories/TextField.stories.tsx b/apps/docs/src/stories/TextField.stories.tsx index 3be37ca5..491fd47a 100644 --- a/apps/docs/src/stories/TextField.stories.tsx +++ b/apps/docs/src/stories/TextField.stories.tsx @@ -15,22 +15,22 @@ const useTextField = (props: TextFieldProps) => { const handleTextChange = (e: ChangeEvent) => { setText(e.target.value); - } + }; - return {...props} value={text} onChange={handleTextChange} /> -} + return {...props} value={text} onChange={handleTextChange} />; +}; export default { title: 'Components/Input/TextField', component: useTextField, tags: ['autodocs'], args: { - style: { width: '335px' } + style: { width: '335px' }, }, argTypes: { - style: { control: false } - } -} + style: { control: false }, + }, +}; export const Default: StoryObj = { args: { @@ -52,7 +52,7 @@ export const NoLabel: StoryObj = { placeholder: 'Placeholder...', isError: false, errorMessage: 'error message', - required: true, + required: false, readOnly: false, disabled: false, }, @@ -136,4 +136,4 @@ export const Error: StoryObj = { readOnly: false, disabled: false, }, -}; \ No newline at end of file +}; From a370331b56c7e6cb0f0209937a47595a58444b65 Mon Sep 17 00:00:00 2001 From: Brokyeom Date: Tue, 29 Oct 2024 16:51:28 +0900 Subject: [PATCH 3/5] =?UTF-8?q?fix:=20FieldBox.Label=20Optional=20prop?= =?UTF-8?q?=EC=9C=BC=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/ui/FieldBox/components/Label.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/ui/FieldBox/components/Label.tsx b/packages/ui/FieldBox/components/Label.tsx index 587bc851..dbff8ce8 100644 --- a/packages/ui/FieldBox/components/Label.tsx +++ b/packages/ui/FieldBox/components/Label.tsx @@ -3,13 +3,13 @@ import { forwardRef } from 'react'; import { requiredMarkStyle, TopAddonDescriptionStyle, TopAddonLabelStyle } from '../style.css'; export interface FieldBoxLabelProps extends HTMLAttributes { - label: string; - description: string; - required: boolean; + label?: string; + description?: string; + required?: boolean; } export const FieldBoxLabel = forwardRef((props, forwardedRef) => { - const { required, label, description } = props; + const { required = false, label, description } = props; return (
From d8a2df6693df24eb8d1927ec01d7a2a89ec09423 Mon Sep 17 00:00:00 2001 From: Brokyeom Date: Tue, 29 Oct 2024 16:52:40 +0900 Subject: [PATCH 4/5] cs --- .changeset/tiny-days-hammer.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tiny-days-hammer.md diff --git a/.changeset/tiny-days-hammer.md b/.changeset/tiny-days-hammer.md new file mode 100644 index 00000000..39fc8d40 --- /dev/null +++ b/.changeset/tiny-days-hammer.md @@ -0,0 +1,5 @@ +--- +'@sopt-makers/ui': patch +--- + +TextField 컴포넌트를 FieldBox 기반으로 수정합니다. From e270c2702e18ca96574ff2d5696721a3842b3256 Mon Sep 17 00:00:00 2001 From: Brokyeom Date: Fri, 1 Nov 2024 17:28:49 +0900 Subject: [PATCH 5/5] feat: add bottomAddon prop. --- packages/ui/Input/TextField.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/ui/Input/TextField.tsx b/packages/ui/Input/TextField.tsx index 21108420..186e813a 100644 --- a/packages/ui/Input/TextField.tsx +++ b/packages/ui/Input/TextField.tsx @@ -5,6 +5,7 @@ import * as S from './style.css'; interface TextFieldProps extends Omit, 'value'> { className?: string; topAddon?: ReactNode; + bottomAddon?: ReactNode; labelText?: string; descriptionText?: string; required?: boolean; @@ -19,6 +20,7 @@ function TextField(props: TextFieldProps) { const { className, topAddon, + bottomAddon, labelText, descriptionText, required, @@ -41,6 +43,7 @@ function TextField(props: TextFieldProps) { bottomAddon={ : null} + rightAddon={bottomAddon} /> } className={className}