127 lines
3.0 KiB
TypeScript
127 lines
3.0 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
import { useState } from 'react'
|
|
import { Radio } from './Radio'
|
|
|
|
const meta = {
|
|
title: 'Components/Radio',
|
|
component: Radio,
|
|
args: {
|
|
name: 'default',
|
|
value: 'option1',
|
|
},
|
|
argTypes: {
|
|
disabled: {
|
|
control: 'boolean',
|
|
},
|
|
readOnly: {
|
|
control: 'boolean',
|
|
},
|
|
},
|
|
} satisfies Meta<typeof Radio>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
name: 'default',
|
|
value: 'option1',
|
|
children: '옵션 1',
|
|
},
|
|
}
|
|
|
|
export const Checked: Story = {
|
|
args: {
|
|
name: 'checked',
|
|
value: 'option1',
|
|
checked: true,
|
|
children: '선택됨',
|
|
},
|
|
}
|
|
|
|
export const Disabled: Story = {
|
|
args: {
|
|
name: 'disabled',
|
|
value: 'option1',
|
|
disabled: true,
|
|
children: '비활성화',
|
|
},
|
|
}
|
|
|
|
export const DisabledChecked: Story = {
|
|
args: {
|
|
name: 'disabled-checked',
|
|
value: 'option1',
|
|
disabled: true,
|
|
checked: true,
|
|
children: '비활성화 (선택됨)',
|
|
},
|
|
}
|
|
|
|
export const ReadOnly: Story = {
|
|
args: {
|
|
name: 'readonly',
|
|
value: 'option1',
|
|
readOnly: true,
|
|
checked: true,
|
|
children: '읽기 전용',
|
|
},
|
|
}
|
|
|
|
export const RadioGroup: Story = {
|
|
render: () => {
|
|
const [selected, setSelected] = useState('option1')
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<Radio name="group" value="option1" checked={selected === 'option1'} onChange={setSelected}>
|
|
옵션 1
|
|
</Radio>
|
|
<Radio name="group" value="option2" checked={selected === 'option2'} onChange={setSelected}>
|
|
옵션 2
|
|
</Radio>
|
|
<Radio name="group" value="option3" checked={selected === 'option3'} onChange={setSelected}>
|
|
옵션 3
|
|
</Radio>
|
|
</div>
|
|
)
|
|
},
|
|
}
|
|
|
|
export const HorizontalRadioGroup: Story = {
|
|
render: () => {
|
|
const [selected, setSelected] = useState('option1')
|
|
return (
|
|
<div className="flex gap-4">
|
|
<Radio name="horizontal-group" value="option1" checked={selected === 'option1'} onChange={setSelected}>
|
|
옵션 1
|
|
</Radio>
|
|
<Radio name="horizontal-group" value="option2" checked={selected === 'option2'} onChange={setSelected}>
|
|
옵션 2
|
|
</Radio>
|
|
<Radio name="horizontal-group" value="option3" checked={selected === 'option3'} onChange={setSelected}>
|
|
옵션 3
|
|
</Radio>
|
|
</div>
|
|
)
|
|
},
|
|
}
|
|
|
|
export const WithMixedStates: Story = {
|
|
render: () => {
|
|
const [selected, setSelected] = useState('option1')
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<Radio name="mixed" value="option1" checked={selected === 'option1'} onChange={setSelected}>
|
|
활성화 옵션 1
|
|
</Radio>
|
|
<Radio name="mixed" value="option2" checked={selected === 'option2'} onChange={setSelected}>
|
|
활성화 옵션 2
|
|
</Radio>
|
|
<Radio name="mixed" value="option3" disabled>
|
|
비활성화 옵션
|
|
</Radio>
|
|
</div>
|
|
)
|
|
},
|
|
}
|