From b4da808fd9b95abd97b82dd61dd3f3d08b649435 Mon Sep 17 00:00:00 2001 From: osohyun0224 Date: Thu, 25 Apr 2024 22:21:08 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=E2=9C=A8=20feat=20::=20=ED=85=8D=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EB=9D=BC=EB=B2=A8=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B0=9C=EB=B0=9C=20=EB=B0=8F=20=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TextLabel/TextLabel.style.ts | 13 +++++++++++ src/components/TextLabel/TextLabel.tsx | 22 ++++++++++++++++++ src/stories/Textlabel.stories.tsx | 25 +++++++++++++++++++++ tsconfig.json | 2 +- 4 files changed, 61 insertions(+), 1 deletion(-) create mode 100644 src/components/TextLabel/TextLabel.style.ts create mode 100644 src/components/TextLabel/TextLabel.tsx create mode 100644 src/stories/Textlabel.stories.tsx diff --git a/src/components/TextLabel/TextLabel.style.ts b/src/components/TextLabel/TextLabel.style.ts new file mode 100644 index 0000000..69ca720 --- /dev/null +++ b/src/components/TextLabel/TextLabel.style.ts @@ -0,0 +1,13 @@ +import { css } from '@emotion/react'; + +import { Theme } from '@styles/Theme'; + +export const labelStyling = css({ + fontSize: Theme.text.small.fontSize, + lineHeight: Theme.text.small.lineHeight, + fontWeight: 600, +}); + +export const requiredStyling = css({ + color: Theme.color.red300, +}); \ No newline at end of file diff --git a/src/components/TextLabel/TextLabel.tsx b/src/components/TextLabel/TextLabel.tsx new file mode 100644 index 0000000..05927c1 --- /dev/null +++ b/src/components/TextLabel/TextLabel.tsx @@ -0,0 +1,22 @@ +import type { ComponentPropsWithoutRef } from 'react'; + +import { labelStyling, requiredStyling } from '@components/TextLabel/TextLabel.style'; + +export interface LabelProps extends ComponentPropsWithoutRef<'label'> { + required?: boolean; +} + +const TextLabel = ({ id, required = false, children, ...attributes }: LabelProps) => { + return ( + + ); +}; + +export default TextLabel; \ No newline at end of file diff --git a/src/stories/Textlabel.stories.tsx b/src/stories/Textlabel.stories.tsx new file mode 100644 index 0000000..0e6f8d6 --- /dev/null +++ b/src/stories/Textlabel.stories.tsx @@ -0,0 +1,25 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import Label from '@components/TextLabel/TextLabel'; + +const meta = { + title: 'Label', + component: Label, + argTypes: { + children: { + control: { type: 'text' }, + }, + required: { + control: { type: 'boolean' }, + }, + }, + args: { + children: 'Label', + required: false, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index cebef64..b2060ce 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -28,5 +28,5 @@ "include": [ "src/**/*.ts", "src/**/*.tsx" - ] +, "src/stories/TextInput.stories.tsx" ] } From a95f4eb6cfb47c86d555757bc37cde7bea38c583 Mon Sep 17 00:00:00 2001 From: osohyun0224 Date: Fri, 26 Apr 2024 19:29:50 +0900 Subject: [PATCH 2/6] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20:=20TextLab?= =?UTF-8?q?el=20=EC=BD=94=EB=93=9C=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= =?UTF-8?q?=20=EC=A7=84=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TextLabel/TextLabel.style.ts | 6 +----- src/components/TextLabel/TextLabel.tsx | 17 +++++------------ src/stories/Textlabel.stories.tsx | 13 ++++--------- tsconfig.json | 4 ++-- 4 files changed, 12 insertions(+), 28 deletions(-) diff --git a/src/components/TextLabel/TextLabel.style.ts b/src/components/TextLabel/TextLabel.style.ts index 69ca720..a3e69d1 100644 --- a/src/components/TextLabel/TextLabel.style.ts +++ b/src/components/TextLabel/TextLabel.style.ts @@ -1,13 +1,9 @@ import { css } from '@emotion/react'; -import { Theme } from '@styles/Theme'; +import { Theme } from '../../styles/Theme'; export const labelStyling = css({ fontSize: Theme.text.small.fontSize, lineHeight: Theme.text.small.lineHeight, fontWeight: 600, }); - -export const requiredStyling = css({ - color: Theme.color.red300, -}); \ No newline at end of file diff --git a/src/components/TextLabel/TextLabel.tsx b/src/components/TextLabel/TextLabel.tsx index 05927c1..4b37762 100644 --- a/src/components/TextLabel/TextLabel.tsx +++ b/src/components/TextLabel/TextLabel.tsx @@ -1,22 +1,15 @@ import type { ComponentPropsWithoutRef } from 'react'; -import { labelStyling, requiredStyling } from '@components/TextLabel/TextLabel.style'; +import { labelStyling } from '@components/TextLabel/TextLabel.style'; -export interface LabelProps extends ComponentPropsWithoutRef<'label'> { - required?: boolean; -} +export interface LabelProps extends ComponentPropsWithoutRef<'label'> {} -const TextLabel = ({ id, required = false, children, ...attributes }: LabelProps) => { +const TextLabel = ({ id, children, ...attributes }: LabelProps) => { return ( ); }; -export default TextLabel; \ No newline at end of file +export default TextLabel; diff --git a/src/stories/Textlabel.stories.tsx b/src/stories/Textlabel.stories.tsx index 0e6f8d6..3d9d0f4 100644 --- a/src/stories/Textlabel.stories.tsx +++ b/src/stories/Textlabel.stories.tsx @@ -2,24 +2,19 @@ import type { Meta, StoryObj } from '@storybook/react'; import Label from '@components/TextLabel/TextLabel'; -const meta = { - title: 'Label', +const meta: Meta = { + title: 'TextLabel', component: Label, argTypes: { children: { control: { type: 'text' }, }, - required: { - control: { type: 'boolean' }, - }, }, args: { children: 'Label', - required: false, }, -} satisfies Meta; +}; export default meta; -type Story = StoryObj; -export const Default: Story = {}; \ No newline at end of file +export const Default: StoryObj = {}; diff --git a/tsconfig.json b/tsconfig.json index b2060ce..52681ea 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -27,6 +27,6 @@ }, "include": [ "src/**/*.ts", - "src/**/*.tsx" -, "src/stories/TextInput.stories.tsx" ] + "src/**/*.tsx" + ] } From b30004ee8d7a5f75ed4a904cf03d68ba2c2a47ca Mon Sep 17 00:00:00 2001 From: osohyun0224 Date: Fri, 26 Apr 2024 23:45:07 +0900 Subject: [PATCH 3/6] =?UTF-8?q?=E2=9C=A8=20feat=20::=20Input=20Field=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B0=9C=EB=B0=9C=20?= =?UTF-8?q?=EB=B0=8F=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../InputField/InputField.styles.ts | 91 ++++++++++++++ src/components/InputField/InputField.tsx | 48 ++++++++ src/stories/InputField.stories.tsx | 115 ++++++++++++++++++ 3 files changed, 254 insertions(+) create mode 100644 src/components/InputField/InputField.styles.ts create mode 100644 src/components/InputField/InputField.tsx create mode 100644 src/stories/InputField.stories.tsx diff --git a/src/components/InputField/InputField.styles.ts b/src/components/InputField/InputField.styles.ts new file mode 100644 index 0000000..18a1210 --- /dev/null +++ b/src/components/InputField/InputField.styles.ts @@ -0,0 +1,91 @@ +import { css } from '@emotion/react'; + +import type { InputFieldProps } from '@components/InputField/InputField'; + +import { Theme } from '@styles/Theme'; + +export const inputContainerStyling = css({ + display: 'flex', + flexDirection: 'column', + gap: Theme.spacer.spacing2, +}); + +export const inputWrapperStyling = (isError: Required['isError']) => { + return css({ + display: 'flex', + gap: '12px', + alignItems: 'center', + + paddingTop: 0, + paddingBottom: 0, + borderRadius: Theme.borderRadius.small, + + backgroundColor: isError ? `${Theme.color.red100} !important` : 'transparent', + + transition: 'all .2s ease-in', + + '&:focus-within': { + backgroundColor: isError ? Theme.color.red100 : Theme.color.white, + boxShadow: isError + ? `inset 0 0 0 1px ${Theme.color.red200}` + : `inset 0 0 0 1px ${Theme.color.gray300}`, + }, + + '& svg': { + width: '16px', + height: '16px', + }, + }); +}; + +export const getVariantStyling = (variant: Required['variant']) => { + const style = { + default: css({ + backgroundColor: Theme.color.gray100, + }), + + text: css({ + backgroundColor: 'transparent', + }), + }; + + return style[variant]; +}; + +export const getSizeStyling = (size: Required['size']) => { + const style = { + large: css({ + padding: '14px 16px', + + fontSize: Theme.text.medium.fontSize, + lineHeight: Theme.text.medium.lineHeight, + }), + + medium: css({ + padding: '12px 16px', + + fontSize: Theme.text.medium.fontSize, + lineHeight: Theme.text.medium.lineHeight, + }), + + small: css({ + padding: '8px 12px', + + fontSize: Theme.text.small.fontSize, + lineHeight: Theme.text.small.lineHeight, + }), + }; + + return style[size]; +}; + +export const getInputStyling = css({ + width: '100%', + paddingLeft: 0, + paddingRight: 0, + border: 'none', + borderRadius: Theme.borderRadius.small, + outline: 0, + + backgroundColor: 'transparent', +}); \ No newline at end of file diff --git a/src/components/InputField/InputField.tsx b/src/components/InputField/InputField.tsx new file mode 100644 index 0000000..649013b --- /dev/null +++ b/src/components/InputField/InputField.tsx @@ -0,0 +1,48 @@ +import type { Size } from '@type/index'; +import type { ComponentPropsWithRef, ForwardedRef, ReactElement } from 'react'; +import { forwardRef } from 'react'; + +import { + getInputStyling, + getSizeStyling, + getVariantStyling, + inputContainerStyling, + inputWrapperStyling, +} from '@components/InputField/InputField.styles'; +import Label from '@components/TextLabel/TextLabel'; + +export interface InputFieldProps extends Omit, 'size'> { + label?: string; + variant?: 'default' | 'text'; + size?: Extract; + isError?: boolean; + icon?: ReactElement; +} + +const InputField = ( + { + label, + variant = 'default', + size = 'medium', + isError = false, + icon, + ...attributes + }: InputFieldProps, + ref: ForwardedRef +) => { + return ( +
+ {label && ( + + )} +
+ {icon} + +
+
+ ); +}; + +export default forwardRef(InputField); \ No newline at end of file diff --git a/src/stories/InputField.stories.tsx b/src/stories/InputField.stories.tsx new file mode 100644 index 0000000..9edddf1 --- /dev/null +++ b/src/stories/InputField.stories.tsx @@ -0,0 +1,115 @@ +import { containerStyle, informationStyle } from './style'; +import type { Meta, StoryObj } from '@storybook/react'; + +import InputField from '@components/InputField/InputField'; + +const meta = { + title: 'InputField', + component: InputField, + argTypes: { + label: { + control: { type: 'text' }, + }, + variant: { + control: { type: 'radio' }, + options: ['default', 'text'], + }, + size: { + control: { type: 'radio' }, + options: ['small', 'medium', 'large'], + }, + isError: { + control: { type: 'boolean' }, + }, + }, + args: { + variant: 'default', + size: 'medium', + placeholder: 'placeholder', + isError: false, + id: 'input', + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = {}; + +export const Variants: Story = { + render: ({ size, isError, placeholder }) => { + return ( +
    +
  • +
    Default
    + +
    • +
  • +
    Text
    + +
    • +
+ ); + }, + argTypes: { + variant: { + control: false, + }, + }, +}; + +export const Sizes: Story = { + render: ({ variant, isError, placeholder }) => { + return ( +
    +
  • +
    Small
    + +
    • +
  • +
    Medium
    + +
    • +
  • +
    Large
    + +
    • +
+ ); + }, + argTypes: { + size: { + control: false, + }, + }, +}; + +export const Default: Story = { + args: { + variant: 'default', + }, + argTypes: { + variant: { + control: false, + }, + }, +}; + +export const Text: Story = { + args: { + variant: 'text', + }, + argTypes: { + variant: { + control: false, + }, + }, +}; + + +export const WithLabel: Story = { + args: { + label: 'Label', + }, + name: 'Input with Label', +}; From 7ac08dfd8373316443a3b4f562e24683398c76c6 Mon Sep 17 00:00:00 2001 From: osohyun0224 Date: Fri, 26 Apr 2024 23:46:41 +0900 Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=90=9B=20fix=20::=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20import=20=EA=B2=BD=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=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 --- src/components/InputField/InputField.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/InputField/InputField.styles.ts b/src/components/InputField/InputField.styles.ts index 18a1210..a24b176 100644 --- a/src/components/InputField/InputField.styles.ts +++ b/src/components/InputField/InputField.styles.ts @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import type { InputFieldProps } from '@components/InputField/InputField'; -import { Theme } from '@styles/Theme'; +import { Theme } from '../../styles/Theme'; export const inputContainerStyling = css({ display: 'flex', From 147f92d4c2072571c93a1dff44d312e9fa8570c8 Mon Sep 17 00:00:00 2001 From: osohyun0224 Date: Sat, 27 Apr 2024 18:40:31 +0900 Subject: [PATCH 5/6] =?UTF-8?q?=E2=9C=A8=20feat=20::=20=EC=9E=85=EB=A0=A5?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20=EC=97=AC?= =?UTF-8?q?=EB=9F=AC=20=EC=83=81=ED=99=A9=20=EC=BC=80=EC=9D=B4=EC=8A=A4=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/InputField/InputField.styles.ts | 6 ++++++ src/components/InputField/InputField.tsx | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/InputField/InputField.styles.ts b/src/components/InputField/InputField.styles.ts index a24b176..6fc0815 100644 --- a/src/components/InputField/InputField.styles.ts +++ b/src/components/InputField/InputField.styles.ts @@ -47,6 +47,12 @@ export const getVariantStyling = (variant: Required['variant']) text: css({ backgroundColor: 'transparent', }), + focus: css({ + backgroundColor: 'transparent', + }), + error: css({ + backgroundColor: 'transparent', + }), }; return style[variant]; diff --git a/src/components/InputField/InputField.tsx b/src/components/InputField/InputField.tsx index 649013b..0d83e00 100644 --- a/src/components/InputField/InputField.tsx +++ b/src/components/InputField/InputField.tsx @@ -13,7 +13,7 @@ import Label from '@components/TextLabel/TextLabel'; export interface InputFieldProps extends Omit, 'size'> { label?: string; - variant?: 'default' | 'text'; + variant?: 'default' | 'text' | 'focus' | 'error'; size?: Extract; isError?: boolean; icon?: ReactElement; From 930298907f9a2bba66dbdb1b4500bb3c671cf772 Mon Sep 17 00:00:00 2001 From: osohyun0224 <53892427+osohyun0224@users.noreply.github.com> Date: Wed, 15 May 2024 18:59:13 +0900 Subject: [PATCH 6/6] =?UTF-8?q?=E2=9C=85=20=20test=20:=20=EB=A7=A5?= =?UTF-8?q?=EB=B6=81=20=EA=B9=83=ED=97=88=EB=B8=8C=20=EC=97=B0=EB=8F=99=20?= =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=EC=9A=A9=20=EC=BB=A4=EB=B0=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TextLabel/TextLabel.style.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/TextLabel/TextLabel.style.ts b/src/components/TextLabel/TextLabel.style.ts index a3e69d1..5323a70 100644 --- a/src/components/TextLabel/TextLabel.style.ts +++ b/src/components/TextLabel/TextLabel.style.ts @@ -1,5 +1,6 @@ import { css } from '@emotion/react'; + import { Theme } from '../../styles/Theme'; export const labelStyling = css({