123 lines
2.4 KiB
TypeScript
123 lines
2.4 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
import { useState } from 'react'
|
|
import { RadioGroup } from './RadioGroup'
|
|
|
|
const meta = {
|
|
title: 'Components/RadioGroup',
|
|
component: RadioGroup,
|
|
args: {
|
|
items: [],
|
|
orientation: 'horizontal',
|
|
isDisabled: false,
|
|
isReadOnly: false,
|
|
},
|
|
argTypes: {
|
|
orientation: {
|
|
control: 'select',
|
|
options: ['horizontal', 'vertical'],
|
|
},
|
|
isDisabled: {
|
|
control: 'boolean',
|
|
},
|
|
isReadOnly: {
|
|
control: 'boolean',
|
|
},
|
|
},
|
|
} satisfies Meta<typeof RadioGroup>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
const defaultItems = [
|
|
{ value: 'option1', label: '옵션 1' },
|
|
{ value: 'option2', label: '옵션 2' },
|
|
{ value: 'option3', label: '옵션 3' },
|
|
]
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
items: defaultItems,
|
|
},
|
|
}
|
|
|
|
export const Horizontal: Story = {
|
|
args: {
|
|
items: defaultItems,
|
|
orientation: 'horizontal',
|
|
},
|
|
}
|
|
|
|
export const Vertical: Story = {
|
|
args: {
|
|
items: defaultItems,
|
|
orientation: 'vertical',
|
|
},
|
|
}
|
|
|
|
export const WithDefaultValue: Story = {
|
|
render: function Render() {
|
|
const [value, setValue] = useState('option2')
|
|
return (
|
|
<RadioGroup
|
|
items={defaultItems}
|
|
value={value}
|
|
onChange={setValue}
|
|
/>
|
|
)
|
|
},
|
|
}
|
|
|
|
export const Disabled: Story = {
|
|
args: {
|
|
items: defaultItems,
|
|
isDisabled: true,
|
|
},
|
|
}
|
|
|
|
export const ReadOnly: Story = {
|
|
args: {
|
|
items: defaultItems,
|
|
isReadOnly: true,
|
|
value: 'option1',
|
|
},
|
|
}
|
|
|
|
export const WithDisabledOption: Story = {
|
|
args: {
|
|
items: [
|
|
{ value: 'option1', label: '옵션 1' },
|
|
{ value: 'option2', label: '옵션 2 (비활성화)', isDisabled: true },
|
|
{ value: 'option3', label: '옵션 3' },
|
|
],
|
|
},
|
|
}
|
|
|
|
export const WithManyOptions: Story = {
|
|
args: {
|
|
items: [
|
|
{ value: 'apple', label: '사과' },
|
|
{ value: 'banana', label: '바나나' },
|
|
{ value: 'orange', label: '오렌지' },
|
|
{ value: 'grape', label: '포도' },
|
|
{ value: 'strawberry', label: '딸기' },
|
|
],
|
|
orientation: 'vertical',
|
|
},
|
|
}
|
|
|
|
export const Controlled: Story = {
|
|
render: function Render() {
|
|
const [value, setValue] = useState('')
|
|
return (
|
|
<div className="space-y-4">
|
|
<RadioGroup
|
|
items={defaultItems}
|
|
value={value}
|
|
onChange={setValue}
|
|
/>
|
|
<p className="text-sm text-gray-600">선택된 값: {value || '없음'}</p>
|
|
</div>
|
|
)
|
|
},
|
|
}
|