125 lines
2.9 KiB
TypeScript
125 lines
2.9 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
import { useState } from 'react'
|
|
import { TextArea } from './TextArea'
|
|
|
|
const meta = {
|
|
title: 'Components/TextArea',
|
|
component: TextArea,
|
|
argTypes: {
|
|
readOnly: {
|
|
control: 'boolean',
|
|
},
|
|
disabled: {
|
|
control: 'boolean',
|
|
},
|
|
},
|
|
} satisfies Meta<typeof TextArea>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
placeholder: '내용을 입력하세요',
|
|
className: 'w-80 h-32',
|
|
},
|
|
}
|
|
|
|
export const WithValue: Story = {
|
|
render: function Render() {
|
|
const [value, setValue] = useState('기본 텍스트 내용입니다.')
|
|
return (
|
|
<TextArea
|
|
value={value}
|
|
onChange={(e) => setValue(e.target.value)}
|
|
className="w-80 h-32"
|
|
/>
|
|
)
|
|
},
|
|
}
|
|
|
|
export const ReadOnly: Story = {
|
|
args: {
|
|
value: '읽기 전용 텍스트입니다. 수정할 수 없습니다.',
|
|
readOnly: true,
|
|
className: 'w-80 h-32',
|
|
},
|
|
}
|
|
|
|
export const Disabled: Story = {
|
|
args: {
|
|
value: '비활성화된 텍스트입니다.',
|
|
disabled: true,
|
|
className: 'w-80 h-32',
|
|
},
|
|
}
|
|
|
|
export const WithPlaceholder: Story = {
|
|
args: {
|
|
placeholder: '여기에 상세 설명을 입력하세요...',
|
|
className: 'w-80 h-32',
|
|
},
|
|
}
|
|
|
|
export const LargeTextArea: Story = {
|
|
args: {
|
|
placeholder: '큰 텍스트 영역입니다.',
|
|
className: 'w-full h-48',
|
|
},
|
|
}
|
|
|
|
export const SmallTextArea: Story = {
|
|
args: {
|
|
placeholder: '작은 텍스트 영역입니다.',
|
|
className: 'w-60 h-20',
|
|
},
|
|
}
|
|
|
|
export const WithMaxLength: Story = {
|
|
render: function Render() {
|
|
const [value, setValue] = useState('')
|
|
const maxLength = 100
|
|
return (
|
|
<div className="space-y-2">
|
|
<TextArea
|
|
value={value}
|
|
onChange={(e) => setValue(e.target.value)}
|
|
maxLength={maxLength}
|
|
placeholder="최대 100자까지 입력 가능합니다."
|
|
className="w-80 h-32"
|
|
/>
|
|
<p className="text-sm text-gray-500">
|
|
{value.length}/{maxLength}
|
|
</p>
|
|
</div>
|
|
)
|
|
},
|
|
}
|
|
|
|
export const WithRows: Story = {
|
|
args: {
|
|
placeholder: 'rows 속성으로 높이를 지정할 수 있습니다.',
|
|
rows: 5,
|
|
className: 'w-80',
|
|
},
|
|
}
|
|
|
|
export const AllStates: Story = {
|
|
render: () => (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">기본</label>
|
|
<TextArea placeholder="기본 상태" className="w-80 h-24" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">읽기 전용</label>
|
|
<TextArea value="읽기 전용 텍스트" readOnly className="w-80 h-24" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">비활성화</label>
|
|
<TextArea value="비활성화된 텍스트" disabled className="w-80 h-24" />
|
|
</div>
|
|
</div>
|
|
),
|
|
}
|