diff --git a/.storybook/main.js b/.storybook/main.js index 1a9f5547..6e1b102d 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,14 +1,14 @@ module.exports = { - framework: "@storybook/react-vite", - stories: ["../src/stories/*.stories.@(js|jsx|ts|tsx)"], + framework: '@storybook/react-vite', + stories: ['../**/*.stories.@(js|jsx|ts|tsx)'], addons: [ - "@storybook/addon-links", - "@storybook/addon-essentials", - "@storybook/addon-interactions", - "@storybook/addon-storysource", - "@storybook/addon-designs", + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + '@storybook/addon-storysource', + '@storybook/addon-designs', ], core: { - builder: "@storybook/builder-vite", + builder: '@storybook/builder-vite', }, }; diff --git a/src/components/Input/CurrencyInput.tsx b/src/components/Input/CurrencyInput.tsx new file mode 100644 index 00000000..a156c92d --- /dev/null +++ b/src/components/Input/CurrencyInput.tsx @@ -0,0 +1,69 @@ +import type { DatePickerLocale } from 'src/utils'; +import Icon from '../Icon'; +import { NumberInput } from './NumberInput'; +import type { NumberInputProps } from './NumberInput'; +import { IconProps } from '../Icon/type'; +import { color } from '../styles'; + +export interface CurrencyInputProps extends Omit { + language: DatePickerLocale; +} + +export function CurrencyInput(props: CurrencyInputProps) { + const { language, ...restProps } = props; + return } {...restProps} />; +} + +// TODO: 다른 분기 유틸성 컴포넌트를 추가하는게 좋을것 같다. +function LanguageIcon({ language }: { language: DatePickerLocale }) { + switch (language) { + case 'ko': + return ; + case 'en': + return ; + case 'vi': + return ; + default: + return null; + } +} + +function DollarIcon({ color: c = color['grey-80'], size = 20 }: IconProps) { + return ( + + + + ); +} + +function DongIcon({ color: c = color['grey-80'], size = 20 }: IconProps) { + return ( + + + + ); +} diff --git a/src/stories/Input.stories.tsx b/src/components/Input/Input.stories.tsx similarity index 86% rename from src/stories/Input.stories.tsx rename to src/components/Input/Input.stories.tsx index 63ab73a8..1f7137f4 100644 --- a/src/stories/Input.stories.tsx +++ b/src/components/Input/Input.stories.tsx @@ -11,12 +11,13 @@ import { type TextInputProps, color, ColorPickerInput, -} from '../components'; -import Icon from '../components/Icon'; -import { BaseInput, type InputTooltipProps } from '../components/Input/InputContainer'; -import { NumberInput } from '../components/Input/NumberInput'; +} from '..'; +import Icon from '../Icon'; +import { BaseInput, type InputTooltipProps } from './InputContainer'; +import { NumberInput } from './NumberInput'; import { useState } from 'react'; -import { FileInput, FileInputProps } from '../components/Input/FileInput'; +import { FileInput, FileInputProps } from './FileInput'; +import { CurrencyInput } from './CurrencyInput'; export default { title: 'Components/Input', @@ -338,3 +339,43 @@ const IconTextWrapper = styled.div` align-items: center; gap: 50px; `; + +export const CurrencyInputDefault: StoryFn = args => { + const [value, setValue] = useState(0); + return value && setValue(value)} />; +}; + +CurrencyInputDefault.args = { + language: 'ko', +}; + +CurrencyInputDefault.argTypes = { + language: { type: { name: 'enum', value: ['ko', 'en', 'vi'] } }, +}; + +export const CurrencyLanguageValdationStory = () => { + return ( +
+ {}} /> + {}} /> + {}} /> +
+ ); +}; + +export const CurrencyRangeStory: StoryFn = args => { + const [value, setValue] = useState(49); + return ( + value && setValue(value)} + /> + ); +}; + +CurrencyRangeStory.args = { + min: 50, + max: 100, +}; diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index 269009cc..a07d9b6c 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -4,8 +4,18 @@ import { PasswordInput, PasswordInputProps } from './PasswordInput'; import { TextInput, TextInputProps } from './TextInput'; import { ColorPickerInput, ColorPickerInputProps } from './ColorPickerInput'; import { FileInput, FileInputProps } from './FileInput'; +import { CurrencyInput, CurrencyInputProps } from './CurrencyInput'; + +export { + InputContainer, + TextInput, + PasswordInput, + NumberInput, + ColorPickerInput, + FileInput, + CurrencyInput, +}; -export { InputContainer, TextInput, PasswordInput, NumberInput, ColorPickerInput, FileInput }; export type { InputBaseProps, TextInputProps, @@ -13,4 +23,5 @@ export type { NumberInputProps, ColorPickerInputProps, FileInputProps, + CurrencyInputProps, };