84 lines
1.7 KiB
TypeScript
84 lines
1.7 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
import Input from './Input'
|
|
import { InputGroup } from './InputGroup'
|
|
|
|
const meta = {
|
|
title: 'Components/InputGroup',
|
|
component: InputGroup,
|
|
argTypes: {
|
|
isReadOnly: { control: 'boolean' },
|
|
},
|
|
} satisfies Meta<typeof InputGroup>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {
|
|
render: (args) => (
|
|
<InputGroup {...args}>
|
|
<Input placeholder="입력해주세요" />
|
|
</InputGroup>
|
|
),
|
|
}
|
|
|
|
export const WithValue: Story = {
|
|
render: (args) => (
|
|
<InputGroup {...args}>
|
|
<Input defaultValue="입력된 값" />
|
|
</InputGroup>
|
|
),
|
|
}
|
|
|
|
export const Disabled: Story = {
|
|
render: () => (
|
|
<InputGroup>
|
|
<Input placeholder="비활성화" disabled />
|
|
</InputGroup>
|
|
),
|
|
}
|
|
|
|
export const ReadOnly: Story = {
|
|
args: {
|
|
isReadOnly: true,
|
|
},
|
|
render: (args) => (
|
|
<InputGroup {...args}>
|
|
<Input defaultValue="읽기 전용" readOnly />
|
|
</InputGroup>
|
|
),
|
|
}
|
|
|
|
export const NumberInput: Story = {
|
|
render: () => (
|
|
<InputGroup>
|
|
<Input type="number" placeholder="숫자 입력" />
|
|
</InputGroup>
|
|
),
|
|
}
|
|
|
|
export const WithPrefix: Story = {
|
|
render: () => (
|
|
<InputGroup>
|
|
<span className="pl-3 text-dabeeo-gray-99">@</span>
|
|
<Input placeholder="사용자명" />
|
|
</InputGroup>
|
|
),
|
|
}
|
|
|
|
export const WithSuffix: Story = {
|
|
render: () => (
|
|
<InputGroup>
|
|
<Input placeholder="금액" type="number" />
|
|
<span className="pr-3 text-dabeeo-gray-99">원</span>
|
|
</InputGroup>
|
|
),
|
|
}
|
|
|
|
export const CustomWidth: Story = {
|
|
render: () => (
|
|
<InputGroup className="w-60">
|
|
<Input placeholder="너비 240px" />
|
|
</InputGroup>
|
|
),
|
|
}
|